1. css властивості для визначення висоти і ширини блоку.
2. margin як правильно поставити відстань між блоками.

Здавалося б що складного в верстці. HTML і CSS навіть не мови програмування. HTML сторінка це просто блоки розміщені в потрібному місці. Насправді все не так просто. Сідати за верстку не розібравшись в нюансах блокової моделі означає вбити багато часу на підгін результатів методом тику кожен раз дивуючись несподіваних результатів або їх відсутності. В Сайтобудування як і в будівництві, якщо хочете побудувати щось серйозніше забору потрібно знати тонкощі.

css властивості для визначення висоти і ширини блоку.

За замовчуванням блок в ширину займає все доступне йому простір і обмежується шириною батьківського блоку. Висота блоку визначається його вмістом.

Розміри блоку можна міняти використовую властивості height і width. Ці властивості задаються не для всього блоку а для його вмісту. Це потрібно пам'ятати тому що крім вмісту на розмір блоку впливають ще дві властивості - border і padding. За назвою можна зрозуміти що border визначає кордон. На зображенні межа позначена червоною лінією. Простір між кордоном і вмістом визначають за допомогою властивості padding. Якщо його не поставити то текст на зображенні нижче впритул притисне до кордону.

Таким чином вираховуючи розмір блоку крім width і height потрібно враховувати padding і border. Для прикладу порахуємо розмір блоку для якого задані такі значення

div {border: 5px solid red; padding: 10px; width: 200px; }

Ширина блоку 200px + 10px * 2 + 5px * 2 = 230px

Щоб не забивати голову арифметикою і завжди точно знати розмір блоку є властивість box-sizing. Приймає три значення.

1. content-box - Значення задані в width і height відносяться тільки до вмісту.
2. padding-box - Значення задані в width і height визначають розмір вмісту плюс розмір відступу (padding).
3. border-box - Значення задані в width і height визначають розмір вмісту плюс відступ (padding) плюс межа (border)

Якщо в приклад вище додати рядок

box-sizing: border-box

розмір блоку буде заявлені 200px, а ширина вмісту зменшиться до 200px-10px * 2-5px * 2 = 170px.

margin як правильно поставити відстань між блоками.

Говорити про блоках і не згадати про margin буде неправильно тим більше розповісти є що. Для тих хто не в курсі margin визначає вільний простір навколо блоку. На відміну від padding тут не все так очевидно. Розглянемо два блоки один вкладений в інший. Задаємо вкладеному блоку margin: 10%. Відразу виникає питання від чого відраховувати ці відсотки. Відсотки беруться від ширини батьківського елементу. При цьому не важливо визначаємо ми горизонтальні або вертикальні відступи. Відповідь, прямо скажемо, не є очевидним, але якщо подивитися пояснення починаєш розуміти чому обрано саме такий варіант.

Сюрпризи на цьому не закінчуються. margin доданий до нашої зображенні дасть такий несподіваний результат.

Сірим на зображенні позначений батьківський блок. Всупереч нашим очікуванням margin застосований до дочірнього блоку не розсунув зверху і знизу кордону батьківського. Сталося це тому що у батьківського блоку не від чого відштовхуватися. У таких випадках margin виноситься на ружу і відштовхується від сусіднього блоку або кордонів блоку розташованого рівнем вище. Щоб блок відштовхувався від батьківського потрібно щоб у батьківського блоку були задані padding або border або властивість overflow з будь-яким значенням крім visible.

Ще одна особливість відступів це схлапиваніе. Сенс в тому що якщо у двох сусідніх елементів заданий margin то відстань між ними дорівнюватиме найбільшим значенням.

margin може приймати негативні значення. У цьому випадку один блок буде перекривати інший. Те наскільки один блок наползёт на інший визначається

1. Якщо обидва margin негативні то береться велике по модулю значення
   
2. Якщо один margin негативний а інший позитивний то вони складаються.