Додавання Простору Елементам
Властивості margin, padding і border допомагають нам додати більше простору до елементів, покращуючи зовнішній вигляд веб-ресурсу, читабельність і зручність використання. Розглянемо кожну з них детальніше.
margin and padding properties
padding property
padding refers to the space between an element's content and its border.
padding: top right bottom left
Властивість margin
Марджин називається простір між елементом і сусідніми елементами. Це область поза межами елемента.
margin: top right bottom left
margin property
margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.
margin: top right bottom left
margin property
margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.
margin: top right bottom left
Each Margin Separately
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Each Margin Separately
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border property
border refers to the line that surrounds an element's padding and content. It is the area that separates the element's content from its margin.
border: width style color;
Shorthand
border: 4px solid brown;
It means that the border of all sides will look the same. Their width is 4px, style is solid, and color is brown.
Let's consider the following example and figure out the possible border styles:
index.html
index.css
Each Border Separately.
/* 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 до різних сторін елемента?
2. How can we apply different margin values to different sides of an element?
3. How can we apply different margin values to different sides of an element?
Дякуємо за ваш відгук!
