CSS: Div-боксы даже при использовании 50%

Question

У меня есть две коробки div, которые я хочу бок о бок. Я использую границу 2px снаружи, а внутри ящиков я использую 1px (чтобы сделать также 2px внешний вид внутренних границ). Когда я использую:

height: auto; 
width: 50%; 

Коробки даже не для того, чтобы иметь возможность использовать правило известково CSS на них. Они над кругом на пять пикселей. Если я удалю 5px на первом, это сработает, но потом у меня осталось немного места в стороне, что я раздражает и не выглядит очень чистым. Вот JSFiddle того, что у меня есть: JSFiddle Link

Спасибо, DoubleDogg6

Answer 1

использование box-sizing: border-box;

добавить следующие CSS

#box1,#box2{box-sizing: border-box;} 

обновление jsfiddlehttp://jsfiddle.net/k7ht7jv8/1/

более

о box- калибровка http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

Для уточнения Cattla's answer элементы обычно используют размер ячейки content-box, что означает, что заданные ширины и высоты влияют только на внутреннюю высоту и ширину элемента, внутри границы элемента и отступы. padding-box включает в себя дополнение элемента и border-box включает в себя заполнение элемента и ширину границы.

Поскольку вы используете границы и задаете ширину, вы должны установить размер ячейки в border-box.

box-sizing - MDN

Answer 3

Другой способ сделать это без коробки-проклейки, чтобы использовать внешний DIV для каждого дел. Добавляйте только границу, маржу и прописью на внутренний div. Установите ширину во внешнем div.

Стиль:

div.percent50 { 
    width:50%; 
} 
div.bordered { 
    border: 5px; 
} 

HTML:

<div class="percent50"> 
    <div class="bordered"> 

    </div> 
</div> 
<div class="percent50"> 
    <div class="bordered"> 

    </div> 
</div> 

Answer 4

Ваша граница делает коробки шире, чем 50% каждый (т.е. ширина границы добавляется к ширине элемента по умолчанию). Чтобы избежать этого, вы можете изменить box-sizing для страницы (или для отдельных элементов:

* { box-sizing: border-box; } 

или

#box1, #box2 { box-sizing: border-box; } 

JSFIDDLE DEMO