Різниця між маржею та прокладкою

Маржа проти Padding
 

Різниця між маржею та прокладкою є важливим аспектом в CSS як маржа та накладка - це два важливих поняття, що використовуються в CSS для забезпечення проміжків між різними елементами. Прокладки і запаси не є взаємозамінними і мають різні цілі, тому повинні використовуватися належним чином. Прокладка - це простір між вмістом і рамкою блоку. Маржа, з іншого боку, - це простір поза межами блоку. Поле відокремлює блоки від сусідніх блоків, тоді як прокладка відокремлює межу від вмісту.

Що таке Padding?

У CSS (Каскадні таблиці стилів), прокладки - це простір між вмістом та межею. Він відокремлює вміст блоку від його краю. Прокладка прозора і включає також фонове зображення або колір тла елемента. Кількість набивання елемента визначається за допомогою терміна "padding" у коді CSS. Наприклад, для додання 25px прокладки навколо вмісту може бути використаний наступний код.

div
ширина: 300px;
висота: 300px;
підкладка: 25px;
межа: 25px суцільний;

При необхідності різні значення прокладки можна окремо вказати і для лівого, правого, верхнього та нижнього. Наступний фрагмент коду визначає різні значення прокладки для кожної сторони.

div
ширина: 300px;
висота: 300px;
підкладка: 25px;
нижня підкладка: 35 пікселів;
підкладка-зліва: 5px;
підкладка-права: 10px;
межа: 25px суцільний;

Що таке маржа?

У CSS (каскадні таблиці стилів) запас - це простір за межами кордону. Він відокремлює блок від інших блоків. Поле також прозоре, але велика відмінність при набиванні полягає в тому, що поле не включає фонові зображення або фонові кольори, застосовані до елемента. Сума маржі в CSS визначається, використовуючи термін "маржа". Наступний фрагмент коду застосував 25px запас навколо блоку div.

div
ширина: 320 пікселів;
висота: 320 пікселів;
межа: 5px суцільний;
маржа: 25px;

Також можуть бути вказані різні значення для різних сторін блоку. Наступний фрагмент коду застосовує різні значення поля для кожної сторони.

div
ширина: 320 пікселів;
висота: 320 пікселів;
межа: 5px суцільний;
margin-top: 25 пікселів;
маржа-нижня: 35 пікселів;
край-ліворуч: 5px;
поле-право: 10px;

Яка різниця між маржами та padding?

• Прокладка - це простір між кордоном та вмістом, а маржа - це простір поза межами.

• Прокладка відокремлює вміст блоку від межі. Поле відокремлює один блок від іншого.

• Прокладка складається з фонових зображень та кольорів фону, застосованих до вмісту, поки поле не містить такого.

• Поля сусідніх блоків може перекриватися, поки накладки не перекриваються.

Підсумок:

Padding vs Margin

Прокладка - це простір всередині кордону блоку, який відокремлює кордон від вмісту. Поле - це відстань поза межами кордону, що відокремлює блок від сусідніх блоків. Інша відмінність полягає в тому, що підкладка включає фонове зображення та кольори тла, застосовані навколо вмісту, а поля не містять їх. Поля сусідніх блоків іноді може перекриватися, коли браузер візуалізує сторінку, але для вкладки такого не відбудеться.

Надано зображення:

1. Модель CSS-коробки від Felix.leg (CC BY-SA 3.0)