Согласованное расстояние между соседними элементами внутри контейнера

Question

У меня есть контейнер с определенной высотой и шириной, который содержит несколько дочерних элементов (div). Я хотел бы иметь 4px lightblue границы вокруг каждого div. Два соседних divs должны иметь только 4px-пространство между ними.

Я могу выполнить это, вручную установив высоты, ширину и края/границы, но я определяю размеры детей в процентах от родителя.

Вот скрипка, которую я установил, показывая divs в родительском, но без какого-либо интервала или границы.

.container { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: lightblue; 
 
} 
 

 
.left { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: lightyellow; 
 
    float: left; 
 
} 
 

 
.top-right { 
 
    width: 70%; 
 
    height: 50%; 
 
    background-color: lightred; 
 
    float: right; 
 
} 
 

 
.bottom-middle { 
 
    width: 35%; 
 
    height: 50%; 
 
    background-color: lightpink; 
 
    float: left; 
 
} 
 

 
.bottom-right { 
 
    width: 35%; 
 
    height: 50%; 
 
    background-color: lightgreen; 
 
    float: right; 
 
} 
 

 
.border { 
 
    /* margin: 4px; */ 
 
}

<div class="container"> 
 
    <div class="left border"></div> 
 
    <div class="top-right border"></div> 
 
    <div class="bottom-middle border"></div> 
 
    <div class="bottom-right border"></div> 
 
</div>

http://jsfiddle.net/ymv0oave/

Answer 1

2px border для всех дивы, и 2рх border для контейнера.

.container { 
... 
    border: 2px solid blue; 
} 
.container div{ 
    box-sizing: border-box; 
    border: 2px solid blue; 
} 

https://jsfiddle.net/afelixj/mja5kfvw/

Answer 2

Собираем полный ответ здесь

.border { 
/* margin: 10px; */ 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
border:4px solid red; 
padding: 4px; 

} 

.remove-right{ 
border-right: none; 
} 

Затем поместите класс в сНу класса тега

<div class="container"> 
    <div class="left border remove-right"></div> 
    <div class="top-right border remove-right "></div> 
    <div class="bottom-middle border"></div> 
    <div class="bottom-right border"></div> 
</div> 

Answer 3

Вы можете использовать функцию calc() css, чтобы использовать% и все еще иметь точную границу 4px.

HTML:

<div class="container"> 
    <div class="left border-right"></div> 
    <div class="top-right border-bottom"></div> 
    <div class="bottom-middle border-right"></div> 
    <div class="bottom-right"></div> 
</div> 

CSS:

.left { 
    width: 30%    //Fallback for the 0.8% people still using IE7/IE8 
    width: calc(30%-4px); //HERE 
    height: 100%; 
    background-color: lightyellow; 
    float: left; 
} 

.top-right { 
    width: 70%; 
    height: 70%    //Fallback for the 0.8% people still using IE7/IE8 
    height: calc(50% -4px); //HERE 
    background-color: lightred; 
    float: right; 
} 

.bottom-middle { 
    width: 35%    //Fallback for the 0.8% people still using IE7/IE8 
    width: calc(35% -4px); //HERE 
    height: 50%; 
    background-color: lightpink; 
    float: left; 
} 

.bottom-right { 
    width: 35%; 
    height: 50%; 
    background-color: lightgreen; 
    float: right; 
} 

.border-right { 
    border-right: 4px solid lightblue; 
} 

.border-bottom { 
    border-bottom: 4px solid lightblue; 
}