вложенные 100% div-ы, внутренний вылазит на толщину границы

stalker_2000 · August 30, 2012

Приветствую! Есть несложный код:


<html>
<head>
<style>
#b { width: 500px; height: 300px; }

#i1 { border: 10px solid black; }
#i2 { border: 10px solid red; }
#i1, #i1 #i2 { width: 100%; height: 100%; }
</style>
</head>

<body>
<div id="b">
<div id="i1"><div id="i2">dddddddd</div></div>
</div>
</body>
</html>

Запустив, мы увидим что внутренний красный див вылезает вправо и вниз из родителя на ширину границы. Почему так происходит и как сделать, что бы внутренний див был таки целиком внутри?

Edited August 30, 2012 by stalker_2000

wwt · August 30, 2012

По спецификации CSS ширина не включает толщину границ вокруг элемента, значение отступов и полей. Но разные браузеры считают ширину по разному в зависимости от прописанного доктайпа, подробнее http://htmlbook.ru/css/width.

если вам нужно чтоб не вылазило то вычитайте из width толщину границ, отступы и поля.

Для более новых версий браузеров можно использовать свойство css box-sizing

stalker_2000 · August 30, 2012

спасибо, ещё обнаружил, что работает задание padding-right и padding-bottom равным толщине границы*2 для внешнего блока

Sign In

вложенные 100% div-ы, внутренний вылазит на толщину границы

Question

stalker_2000

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

stalker_2000

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information