Поля і відступи в css - css по кроках

Зі структурою блоку, сподіваюся, Ви вже знайомі. Якщо немає, то вона представлена ​​нижче.

І так. Вам вже, напевно, відомо, що поля і відступи у блоку представлені властивостями padding і margin відповідно. І в попередній статті ми вже частково торкнулися цієї теми. На цій сторінці трохи докладніше розглянемо поля (padding) і відступи (margin).

Властивості margin і padding дуже схожі один на одного, виконують схожі функції, тому їх часто плутають. Але робити цього звичайно ж не варто, так як все-таки поля і відступи це абсолютно різні речі. Втім це добре видно з малюнка, адже не випадково він тут наведено.

Отже. Поля задаються властивістю padding. Це внутрішні відстані від кордонів блоку до його вмісту.

Властивість може бути застосовано до всіх елементів.

Відстань задається в одиницях довжини, прийнятих в CSS (докладніше тут.). в%. або (за замовчуванням) визначається браузером автоматично.

Властивість padding є універсальним, так як встановлює поля від меж елемента до його вмісту для всіх його сторін, об'єднуючи таким чином в собі властивості padding-top. padding-right. padding-bottom і padding-left. які задають ширину полів для кожної зі сторін елемента індивідуально.

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

Властивість margin також може бути застосовано до всіх елементів.

Відступи також задаються в одиницях довжини, прийнятих в CSS (докладніше тут.). в%. або (за замовчуванням) визначається браузером автоматично.

Властивість margin є універсальним, так як задає величину відступів від кордонів елемента для всіх його сторін, об'єднуючи таким чином в собі властивості margin-top. margin-right. margin-bottom і margin-left. які встановлюють ширину відступів від кожної з меж елемента індивідуально.

І ще. відступи (margin) розташовуються за межами блоку, в той час як поля (padding) всередині його, тому фон блоку або його фонове зображення поширюються тільки на поля, а відступи завжди прозорі, або мають фон основного (батьківського) блоку або фон сторінки.