Мой Справочник | CSS | Размеры и отступы

Размеры
Свойство	Описание	Примеры
height	Высота	`height: auto; по ум.`	Занимает всю доступную высоту род. элемента
height	Высота	`height: 100%;`	Высота равна высоте род. элемента
width	Ширина	`width: auto; по ум`	Занимает всю доступную ширину род. элемента
width	Ширина	`width: 100%;`	Ширина равна ширине род. элемента
min-height	Минимальная высота будет увеличиваться при расширении контента	`min-height: 20px;`
min-width	Минимальная ширина будет увеличиваться при расширении контента	`min-width: 30%;`
max-height	Максимальная высота будет увеличиваться до заданного размера при расширении контента	`max-height: 200px;`
max-width	Максимальная ширина будет увеличиваться до заданного размера при расширении контента	`max-width: 30%;`

Отступы
Свойство	Описание	Примеры
margin	Внешние отступы Горизонтальные - складываются Вертикальные - больший из двух	`margin: 10px; margin: 10px 20px; margin: 10px 20px 15px; margin: 10px 20px 15px 5px;`	Со всех сторон: 10px Сверху и снизу: 10px, слева и справа: 20px; Сверху: 10, слева и справа: 20px, снизу: 15px Сверху: 10px, справа: 20px, снизу: 15px, слева: 5px
		`margin-top:`	Отступ сверху
		`margin-bottom:`	Отступ снизу
		`margin-left:`	Отступ слева
		`margin-right:`	Отступ справа
		`margin: 0 auto;`	Центровка блочного элемента внутри родителя
padding	Внутренние отступы Горизонтальные и вертикальные - складываются	`padding: 10px; padding: 10px 20px; padding: 10px 20px 15px; padding: 10px 20px 15px 5px;`	Со всех сторон: 10px Сверху и снизу: 10px, слева и справа: 20px; Сверху: 10, слева и справа: 20px, снизу: 15px Сверху: 10px, справа: 20px, снизу: 15px, слева: 5px
		`padding-top:`	Отступ сверху
		`padding-bottom:`	Отступ снизу
		`padding-left:`	Отступ слева
		`padding-right:`	Отступ справа

Схлопывание маргинов

Внутренний контейнер не оттолкнется от родителя, а это свойство передатся родителю, и уже родитель оотолкнется от верхнего содержимого, при этом внутренний контейнер прижмётся к верхней границе родителя


			.box1 {

			    ...

			}



			.box2 {

			    ...

			    margin-top: 40px;

			    ...

			}

Как это лечится?
Можно задать родителю:

padding-top: 1px;
border-top: 1px solid transparent;
Текст внутри родителя, также можно прозрачный


			.box1 {

			    ...

			    border: 1px solid transparent;

			}



			.box2 {

			    ...

			    margin-top: 40px;

			    ...

			}

Box-sizing
Свойство	Описание	Примеры
box-sizing: content-box;	Блочная модель по ум. (размеры контента)	`<div class="box1"></div> .box1 { box-sizing: content-box; height: 50px; width: 150px; padding: 10px; border: 5px solid red; }` Some text Some text Some text Some text Some text Some text РАЗМЕР: height=50px+10px2+5px2=px; width=150px+10px2+5px2=180px;	Размер блока = height/width + padding + border + margin
box-sizing: border-box;	Размер фиксированый по width и height, не зависит от padding, margin, border	`<div class="box2"></div> .box2 { box-sizing: border-box; height: 50px; width: 150px; padding: 10px; border: 5px solid red; }` Some text Some text Some text Some text Some text Some text РАЗМЕР: height=50px; width=150px;	Размер блока фиксированный по width и height, Если контент не вместился в фиксированные размеры бокса, то он будет выпадать из него

Все элементы с border-box


* {
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
Но првильнно так:
                  html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }