Why doesn't nested div width render as expected in webKit and Gecko?_问答_开发者

Why doesn't nested div width render as expected in webKit and Gecko?

开发者 https://www.devze.com 2023-01-29 08:51 出处：网络

Here is my code: i 开发者_开发百科am assuming am doing something wrong, but am expecting the padding on the right to also be 2px?

Here is my code:

i 开发者_开发百科am assuming am doing something wrong, but am expecting the padding on the right to also be 2px?

<!DOCTYPE html>
<html>
 <head>
  <style>
   div{border:solid 1px gray;}
   #outer{width:200px; padding:2px;}
   #inner{width:100%;}
  </style>
 </head>
 <body>
  <div id="outer">
   <div id="inner">&nbsp;</div>
  </div>
 </body>
</html>

Render:

Why doesn't nested div width render as expected in webKit and Gecko?

Your problem is that you have specified the size of the inner box to be the same size as the outer box. Set the width to auto and your problem goes away.

The padding makes an extra invisible box around your object, so the actual size of the outer is more than 200. However, inside it is 200. Same with the border. On the inner box, when you then specify it to be 100% it will be 200px, but the border will take up 2px, making an offset that makes it look like the padding is not being applied.

div is a block level element, which by definition will expand to take up the full width of its parent container taking into account any margins, padding and borders. specifying the #inner width to 100% is effectively the same as setting it to 200px. Just remove the width declaration and you'll be all set.