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

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

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

padding: top right bottom left

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

Скорочення

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

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

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

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

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

margin: top right bottom left

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

Скорочено

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

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

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

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

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

border: width style color;

Скорочено

border: 4px solid brown;

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

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

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

/* Instead of "top", can be used any side (right, left or bottom) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;