calc-padding-block-1-ref.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <title>CSS Reference: Test of padding-*: calc()</title>

  <link rel="author" title="L. David Baron" href="https://dbaron.org/">

<style type="text/css">

body { width: 500px }

div { border: medium solid green }

p { background: yellow; margin: 0 }

</style>

</head>

<body>

<div style="padding: 15px 0 0 0"><p>paragraph with padding</p></div>

<div style="padding: 0 15px 0 0"><p>paragraph with padding</p></div>

<div style="padding: 0 0 15px 0"><p>paragraph with padding</p></div>

<div style="padding: 0 0 0 15px"><p>paragraph with padding</p></div>

<div style="padding: 25px 25px 25px 25px"><p>paragraph with padding</p></div>

</body>

</html>