В чем разница content-box от padding-box?

Question

[sergealmazov]

Вроде бы и пример куда проще. Не могу понять разницу между content-box и padding-box?

codepen.io/sergealmazov/pen/ByLvGR

Answer 1

[Александр]

content-box в размер блока учитываеться padding: width:100px; padding-right:20px; = width:120px;
padding-box не учитываеться padding: width:100px; padding-right:20px; = width:100px;

Comments

[sergealmazov]

Как бы да. А можно пример на Codepen?

[Александр]

sergealmazov: на Codepen пример не работате попробуй через дебагер открыть любой сайт и там по эксперементировать!)

Answer 2

[Иван]

padding-box не везде работает.

Comments

[sergealmazov]

В этом я уже убедился (см. ссылку). В Chrome stable разницы нет.

Answer 3

[keslo]

К примеру, width задает вам ширину блока div. Также этому блоку вы хотите задать отступы padding.

1. Если вам необходимо выдержать указанный размер width для блока чисто для содержимого, то выбираем модель content-box. Тогда указанные отступы и граница будет уже отсчитываться от края значения блока width и тогда итоговый размер блока будет составлять:

итоговый размер блока = padding + width
размер для контента внутри блока = width

2. Если вам необходимо выдержать во чтобы то ни стало размер width блока div и имеется возможность "отжать" немного места в блоке ради этого, то выбираем модель padding-box.

итоговый размер блока = width
размер для контента внутри блока = width - padding

Товарищи, если я не прав, то поправьте меня.

Comments

[sergealmazov]

Все так. В теории. Практика показывает другое.

Answer 4

[Алексей Чернышев]

Если открыть исходный пример codepen.io/sergealmazov/pen/ByLvGR в Mozilla, то разница будет видна сразу. Там блоки с padding-box уже, т.к. не включают в себя border