Menu
If I style an <h1> element with padding: 1.2em or padding: 10%, is that relative to the:
<h1> element?<h1> element?And is it different for em and %?
345
What is a relative unit? A relative unit gets sizing from something else. In the specification the relative length units are defined as em , ex , ch and rem . These are font-relative lengths. The specification also defines a % value, which is always relative to another value.
Relative length unitsFont size of the parent, in the case of typographical properties like font-size , and font size of the element itself, in the case of other properties like width . x-height of the element's font. The advance measure (width) of the glyph "0" of the element's font. Font size of the root element.
CSS Demo: padding An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.
All CSS Padding Properties Property Description padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element 1 more rows ...
All the padding properties can have the following values: 1 length - specifies a padding in px, pt, cm, etc. 2 % - specifies a padding in % of the width of the containing element 3 inherit - specifies that the padding should be inherited from the parent element
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Simply, Padding means Push Inside. When we say push inside we mean in a rectangle type view the content pushed itself according to the dimension specified in the padding attribute. Diagrammatically, the concept of Padding is shown as: The Above syntax will specify an extra space inside the view in all direction equally i.e.,
It is indeed different for em and %:
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.
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.)
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
