Я хочу, чтобы два элемента занимали точный процент от ширины родителя, но мне также нужны поля, на которых они разделены. У меня есть следующая разметка:
<div class='wrap'>
<div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>
.wrap {
background:red;
white-space:nowrap;
width:300px;
}
.element {
background:#009; color:#cef; text-align:center;
display:inline-block;
width:50%;
margin:4px;
}
Как вы можете видеть в http://jsfiddle.net/NTE2Q/, результат состоит в том, что дети переполняют оболочку:
Как я могу заставить их поместиться в пространстве? К сожалению, для этого случая нет box-sizing:margin-box
.