Почему вложенные элементы div width не отображаются так, как ожидается в webKit и Gecko? - PullRequest
Новая
       3

Почему вложенные элементы div width не отображаются так, как ожидается в webKit и Gecko?

2 голосов
/ 07 декабря 2010

Вот мой код:

Я предполагаю, что делаю что-то не так, но ожидаю, что отступ справа также будет 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>

Визуализация:
alt text

Ответы [ 2 ]

2 голосов
/ 07 декабря 2010

Ваша проблема в том, что вы указали размер внутреннего блока, равный размеру внешнего блока.Установите для ширины значение auto, и ваша проблема исчезнет.

Обивка создает дополнительную невидимую рамку вокруг вашего объекта, поэтому фактический размер внешнего элемента составляет более 200. Однако внутри он равен 200. То же самое сграницы.На внутреннем блоке, когда вы укажете, что он равен 100%, это будет 200 пикселей, но граница займет 2 пикселя, создав смещение, которое будет выглядеть так, как если бы отступ не применялся.

1 голос
/ 07 декабря 2010

div - это элемент уровня блока, который по определению расширится и будет занимать всю ширину родительского контейнера с учетом любых полей, отступов и границ. задание ширины #inner равным 100% фактически равнозначно установке 200px. Просто удалите объявление ширины, и все будет готово.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...