Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

Here is an example:

http://jsfiddle.net/QZAd8/1/

Notice how all of the red divs are the same height and have padding-top:100%;, yet they A & B have different padding sizes... and it appears that the width of the parent changes this value (note that C changes the height of the parent, yet that doesn't alter the padding).

Why is padding related to width in this way?

Edit: for historical reasons, and in case jsfiddle goes away, the code I used in my example is as follows...

.outer {    background-color: green;    height: 300px;    width: 70px;    float: left;    margin-right: 10px;  }    .middle {    background-color: red;    height: 100px;    width: 50px;    padding-top: 100%;  }    .inner {    background-color: blue;    height: 3px;    width: 100%;  }
<div class='outer'>    <div class='middle'>      A      <div class='inner'>      </div>    </div>  </div>    <div class='outer' style='width:100px'>    <div class='middle'>      B      <div class='inner'>      </div>    </div>  </div>    <div class='outer' style='height:400px'>    <div class='middle'>      C      <div class='inner'>      </div>    </div>  </div>
like image 562
Mason Cloud Avatar asked Jul 12 '13 17:07

Mason Cloud


People also ask

Does padding affect width?

Padding and Element Width CalculationsIf an element has a specified width, any padding added to that element will add to the total width of the element. This is often an undesirable result, as it requires that an element's width be recalculated each time the padding is adjusted.

How is padding percentage calculated?

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 #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.

Can you use percentages for padding?

Percentages can also be used to set the padding and margin of elements. When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.

What is the difference between width and padding?

Width is the space from left to right that the element takes up on the page. Padding is the space around the content of the element (all four sides) but inside of the border. Using a larger width you would just stretch the element out further and the height would not change.


2 Answers

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

like image 195
Zhanger Avatar answered Sep 29 '22 22:09

Zhanger


Just because it's the way it is suppose to be :) http://www.w3.org/TR/CSS2/box.html#propdef-padding-top

like image 26
G-Cyrillus Avatar answered Sep 29 '22 22:09

G-Cyrillus