What Is the Third Value in CSS Padding

What is the third value in CSS padding?

The padding and margin properties specify top right bottom left.

If left is omitted, it will default to right.

Thus, padding: a b c is equivalent to padding: a b c b.

If bottom is also omitted, it will default to top.

Thus, padding: a b is equivalent to padding: a b a b.

If right is also omitted, the single value is used for all 4 sides.

Thus, padding: a is equivalent to padding: a a a a.

CSS padding shorthand confusion

It is indeed confusing, but it's just the was CSS works. If you specify 1 value, it will be used for all four sides. If you specify two, the first will be the top/bottom padding and the second will be left/right. So when specifying three, it goes top, left/right, bottom, echoing the usage for when only two values are provided.

How to add different CSS style to every nth element, depending on n using LESS

Using less(but you have to set the num of elements):

.parent (@indexstart,@index) when (@indexstart < @index ){
  div:nth-child(@{indexstart}){
    padding-left: (@indexstart - 1) * 15px;
  }
  .parent (@indexstart + 1,@index);
}
.parent (1,4);

See example

CSS: Understanding the padding statement

padding is a shorthand property of

• padding-top
• padding-right
• padding-bottom
• padding-left

It allows multiple values:

If there is only one component value, it applies to all sides. If
there are two values, the top and bottom paddings are set to the first
value and the right and left paddings are set to the second. If there
are three values, the top is set to the first value, the left and
right are set to the second, and the bottom is set to the third. If
there are four values, they apply to the top, right, bottom, and left,
respectively.

Therefore, padding: 30px 0 sets padding-top and padding-bottom to 30px, and padding-right and padding-left to 0

Can we define min-margin and max-margin, max-padding and min-padding in css?

Yes, you can!

Or if not those terms exactly, then at least the next best thing. In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp().

A min calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule:

padding-right: min(50px, 5%);

A max calculation similarly picks the largest from a comma separated list of values (of any length). This can be used to define a min-padding or min-margin rule:

padding-right: max(15px, 5%);

A clamp takes three values; the minimum, preferred, and maximum values, in that order.

padding-right: clamp(15px, 5%, 50px);

MDN specifies that clamp is actually just shorthand for:

max(MINIMUM, min(PREFERRED, MAXIMUM))

Here is a clamp being used to contain a 25vw margin between the values 100px and 200px:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  border: 2px dashed red;
}

.margin {
  width: auto;
  min-width: min-content;
  background-color: lightblue;
  padding: 10px;
  margin-right: clamp(100px, 25vw, 200px);
}

<div class="container">
  <div class="margin">
    The margin-right on this div uses 25vw as its preferred value,
    100px as its minimum, and 200px as its maximum.
  </div>
</div>

HTML Padding Style

Your syntax is full of errors.

It has to be

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>

and yes, in short this is identical to

<h2 style="padding: 20px">London</h2>

There is also three other short forms:

/* applies 10px top/bottom, and 5px left/right */
padding: 10px 5px; 

/* applies 10px top, 0 to bottom, and 5px left/right */
padding: 10px 5px 0; 

/* applies 1px top, 2px right, 0 bottom, 4px left (clockwise, starting at top) */
padding: 1px 2px 0 4px;

How can I apply padding values dynamically based on the value from the CSS class?

We can use the way around to achieve what you're looking for, like this:

div{    padding-left: calc(15px * var(--depth));    margin-bottom: 3px;}

<div style="--depth:1">a</div><div style="--depth:2">a</div><div style="--depth:3">a</div><div style="--depth:4">a</div>

Why are margin/padding percentages in CSS always calculated against width?

Transferring my comment to an answer, because it makes logical sense. However, please note that this is unfounded conjecture. The actual reasoning of why the spec is written this way is still, technically, unknown.

Element height is defined by the height of the
children. If an element has padding-top: 10% (relative to parent
height), that is going to affect the height of the parent. Since the
height of the child is dependent on the height of the parent, and the
height of the parent is dependent on the height of the child, we'll
either have inaccurate height, or an infinite loop. Sure, this only
affects the case where offset parent === parent, but still. It's an
odd case that is difficult to resolve.

Update: The last couple sentences may not be entirely accurate. The height of the leaf element (child with no children) has an effect on the height of all elements above it, so this affects many different situations.

---

Related Topics