Свойство ▶ box-sizing (англ.- коробка+размер) ▶ content-box ▶ border-box CSS3 Обучение Уроки ⁂20

▶Свойство box-sizing (англ.- коробка+размер) изменяет ширину и высота элементов. Согласно спецификации CSS ширина блока складывается из ширины контента width, значений margin, padding и border.

▶content-box (англ.- содержание+коробка) - основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения margin, padding и border.

▶border-box (англ. - кайма+коробка) - свойства width и height включают в себя значения padding и border, но не margin.

перевод border-box

[ЯнаЮрченко-юг]

Разобралась с content-box, border- box, спасибо!

[maestro]

Наконец то разобрался чего-куда с box-sizing-надо только запомнить)

[OMOH]

Всё получилось. Будем знать про эти свойства)

[Elenka]

content-box, border- box. Урок пройден!!! Спасибо, вопросов нет.

[ЮлияЛинник-оп]

то есть грубо говоря контент- бокс ипользуем когда у нас один контент, а бордер бокс используем для построение таблицы-несколько блоков одинакого размера но размер контента уменьшается за счет отступов, а если у разных блоков-разный контент по размеру? извините, я наверно запуталась, и не то пишу, если использовать бордер- бокс можно ли сделать так чтоб-контент был одного размера? там наверно нужно будет высоту блока подгонять, так?

[ПавелТутбай]

С border-box всё просто - задаваемая width указывает ширину именно border-boxа, а если Вы выбрали значение content-box - то задаваемая width указывает ширину content-boxа :)

[alexandern.]

Элемент <img> блочный или строчный? С первого взгляда ведет себя как строчный, но margin применяется для этого элемента сверху и снизу. Почему так?

[ИванАлексеев-сг]

.w {
border: solid 5px;
padding: 5px;
width: 100px; height: 100px;
box-sizing: border-box;

margin: 30px;
}

пробовал сам с другой картинкой...у меня размер контента получился 80*80, хотя по логике должны быть 90 (width 100 px-border 5px-padding 5px=90px контент)

[rollangrant]

мало того что все в кучу собрал и ничего не понятно, так еще и музыку включил....