Додавання простору за допомогою відступів і внутрішніх полів
Властивості margin, padding та border дозволяють додавати простір до елементів, покращуючи зовнішній вигляд, читабельність і зручність використання веб-ресурсу. Розглянемо кожну з них детальніше.
Властивості margin і padding
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 — це простір між елементом та сусідніми елементами. Це область поза межами рамки елемента.
margin: top right bottom left
Ми можемо задавати margin кількома способами.
Скорочений запис
/* 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-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Властивість border
border — це лінія, яка оточує внутрішній відступ (padding) та вміст елемента. Вона відокремлює вміст елемента від його зовнішнього відступу (margin).
border: width style color;
Скорочений запис
border: 4px solid brown;
Це означає, що рамка з усіх сторін виглядатиме однаково. Її width — 4px, style — solid, а color — brown.
Розглянемо наступний приклад і визначимо можливі стилі рамки:
index.html
styles.css
Вивід
Кожна межа окремо
/* 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;
1. Яка різниця між margin та padding у CSS?
2. Яке призначення властивості border?
3. Як можна застосувати різні значення margin до різних сторін елемента?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between margin and padding?
How do I choose which border style to use?
Can I use different values for each side of margin, padding, or border?
Awesome!
Completion rate improved to 2.56Додавання простору за допомогою відступів і внутрішніх полів
Свайпніть щоб показати меню
Властивості margin, padding та border дозволяють додавати простір до елементів, покращуючи зовнішній вигляд, читабельність і зручність використання веб-ресурсу. Розглянемо кожну з них детальніше.
Властивості margin і padding
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 — це простір між елементом та сусідніми елементами. Це область поза межами рамки елемента.
margin: top right bottom left
Ми можемо задавати margin кількома способами.
Скорочений запис
/* 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-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Властивість border
border — це лінія, яка оточує внутрішній відступ (padding) та вміст елемента. Вона відокремлює вміст елемента від його зовнішнього відступу (margin).
border: width style color;
Скорочений запис
border: 4px solid brown;
Це означає, що рамка з усіх сторін виглядатиме однаково. Її width — 4px, style — solid, а color — brown.
Розглянемо наступний приклад і визначимо можливі стилі рамки:
index.html
styles.css
Вивід
Кожна межа окремо
/* 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;
1. Яка різниця між margin та padding у CSS?
2. Яке призначення властивості border?
3. Як можна застосувати різні значення margin до різних сторін елемента?
Дякуємо за ваш відгук!
