Relative Padding Is Relative to What

Relative padding is relative to what?

It is indeed different for em and %:

Ems

The padding size is relative to the calculated font size of that element.

So, if your <h1>’s calculated font size is 16px, then 1.2 ems of padding = 1.2 × 16 pixels = 19.2 pixels.

Percentages

The padding size is relative to the width of that element’s content area (i.e. the width inside, and not including, the padding, border and margin of the element).

So, if your <h1> is 500px wide, 10% padding = 0.1 × 500 pixels = 50 pixels.

(Note that top and bottom padding will also be 10% of the width of the element, not 10% of the height of the element.)

Parent's padding influences vertical relative padding of child in Chrome

Apparently it's a bug in Webkit and Blink – or it's just not specified, as Sergiy pointed out.

I consider it a bug since width: 100% is taking paddings into account, and any other % units should behave the same.

I filed a bugreport which got accepted, it's fixed in v52 of Chrome.

Safari 10.1 still has the issue.

Is padding-bottom relative to element's width?

No, in the padding properties, percentages are relative to the width of the containing block, which is here probably the body element or a div element with no width set, so it occupies the available width.

If you wrap the element in a div container and set the desired width on the container, then you can use a percentage as intended.

Is it possible to change the 'relative' padding of an element to shift the content?

Do you mean something like this: Changing the padding on :active?

#btn{
  display:block;
  width:60px;
  height:20px;
  background-color:#dddddd;
  padding: 5px 15px;
  cursor:pointer;
}
#btn:active{
  padding: 7px 13px 3px 17px;
}

<a id="btn">click me</a>

Padding between relative and absolute positions

When an element is set to position:absolute, its containing box is the parent's padding box (the box around the padding). The result in your example is correct.

jsFiddle

You can probably do this to get the result you want, and width:calc(100% - 100px) on the parent doesn't seem to be necessary in your example.

#children:hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px; /* the same value as parent's right padding */
  width: auto; /* reset to default, depending on 'left' and 'right' values */
}

EDIT

OP actually has two absolute divs inside, using calc() can help.

jsFiddle

#parent:hover .children {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% - 50px);
}
#parent:hover .children:nth-child(2) {
  left: calc(50% - 50px);
}

But, the easiest way would be adding an additional container to the parent, and set the padding and background on it, rest of style unchanged.

jsFiddle

<div id="container">
  <div id="parent">
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

---

#container {
  padding-right: 100px;
  background: pink;
}
#parent {
  height: 100vh;
  position: relative;
}

Margin-top percentage not relative to parent

Vertical padding and margin are relative to the width of the parent. Top and bottom on the other hand are not.

Try to place a div inside another. Use the top property (for example: top: 25%) and make sure you specify a position (e.g. position: relative;)

I've forked and adjusted your code example to demonstrate what I mean: https://codepen.io/anon/pen/Yaqmva

top: 5%;
position: relative;

How is padding-top as a percentage related to the parent's width?

From CSS fluid layout: margin-top based on percentage grows when container width increases :

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Straight from the horse's mouth:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

Percentages: refer to width of containing block

---

Related Topics