CSS percentual padding / margin in border

To my understanding, using box-sizing:content-box , when setting the padding and margin of an element in percent, these will be the percent of the width of the actual content area. So a 50% margin of a 300px wide image, without any relation to its padding, will create a 150px wide margin and therefore an actual size of 450px width (+padding).

Now, when I use box-sizing:border-box , width is defined as content+padding+border. If I set the padding of my element in border-box using percent, will it refer to this different definition of width, therefore referring to itself? If not, and it refers to the content's width only, in that case the content width itself is also dependent of the padding's and border's width (content width=(border-box width)-border-padding), therefore a higher percentage on the padding would refer to a smaller content, making the padding itself smaller again. Am I understanding this right? This seems like the padding would base itself off itself to me in both cases. What am I missing? And in what order is the browser calculating the percentages, based on what (the content only or the actual width)?

Thanks a lot!

---

It doesn't matter what you set box-sizing to with respect to how the actual sizes of margins and borders are calculated. It will be the same either way.

What content-box or border-box do is control with width and height of an element so that the border and padding are not included ( content-box ) or they are included ( border-box ) in the overall size specified by height and width .

Also, borders can't have a width set to a percentage and padding is based on the element's width, not content.

#one {
  box-sizing:content-box; /* default */
  width:100px;
  height:100px;
  padding:10%; /* padding % is a percentage of the element's width */
  border:1px solid red;
  border:10% solid black;  /* Borders can't be set to percentages */
  background:yellow;
  float:left;
}

#two {
  box-sizing:border-box; /* default */
  width:100px;
  height:100px;
  padding:10%; /* padding % is a percentage of the element's width */
  border:1px solid red;
  border:10% solid black;  /* Borders can't be set to percentages */
  background:blue;
  float:left;
}

<div id="one"></div>
<div id="two"></div>

链接地址: http://www.djcxy.com/p/75596.html

上一篇: CSS

下一篇: 边框中的CSS百分比填充/边距