Добавления обивки до колонн добавления до 100%

Question

У меня есть три дивы рядная заблокирована с шириной 33% каждое:

<div> 
    <div class="third">hello</div> 
    <div class="third">hello</div> 
    <div class="third">hello</div> 
</div> 

УС:

.third { 
    width: 33%; 
    display:inline-block; 
    background-color:yellow; 
} 

Но как только добавить отступы к дивы, она толкает ширину столбцов, и они переносятся на следующую строку:

.third { 
    padding:10px; 
} 

есть в любом случае я могу предотвратить отступы от increasin g размер div? Я просто хочу, чтобы содержимое было нажато внутрь.

Скрипки, чтобы продемонстрировать: http://jsfiddle.net/chdehewh/

Спасибо!

Answer 1

Box проклейки определяется как пограничный коробка делает отступы и границы включены в общую ширину

.third { 
    width: 33%; 
    display:inline-block; 
    background-color:yellow; 
    box-sizing: border-box; 
} 

Смотреть это работает: http://jsfiddle.net/chdehewh/2/

Также я включил трюк, чтобы избежать пробелов с инлайн элементов блока. Посмотрите

Answer 2

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

Прежде всего, вы должны установить box-sizing: border-box; на свой класс .third-with-padding.

Далее вам нужно удалить пробелы между вашими div. Пробелы отображаются, как если бы они были в тексте при использовании display: inline-block;. Если вы не хотите удалять символы пробела (очищайте код чище), вы можете использовать float, flexbox, display: table или множество других решений.

HTML

<div> 
    <div class="third-with-padding"> 
     hello 
    </div><div class="third-with-padding"> 
     hello 
    </div><div class="third-with-padding"> 
     hello 
    </div> 
</div> 

CSS

.third-with-padding { 
    box-sizing: border-box; 
    width: 33%; 
    display:inline-block; 
    background-color:yellow; 
    padding:10px; 
}