Додавання Простору Елементам

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

Властивість padding

padding відноситься до простору між вмістом елемента та його рамкою.

Існує декілька способів задати значення padding.

Скорочення

Кожний padding окремо

Властивість margin

Марджин називається простір між елементом і сусідніми елементами. Це область поза межами елемента.

Ми можемо дати марджин кількома способами.

Скорочено

Кожний margin окремо

Властивість border

border відноситься до лінії, яка оточує падінг та вміст елемента. Це область, яка відокремлює вміст елемента від його марджина.

Скорочено

Це означає, що рамка всіх сторін будуть виглядати однаково. Їх ширина - 4px, стиль - solid, а колір - brown.

Розглянемо наступний приклад і розберемося з можливими стилями рамок:

Кожен border окремо.