CSS полета

 Маржовете се използват за създаване на пространство около елементи, извън определените граници.

---

Този елемент има марж от 70px.

Опитайте сами »

---

CSS полета

marginСвойствата на CSS се използват за създаване на пространство около елементи, извън определените граници.

С CSS имате пълен контрол над полетата. Има свойства за задаване на полето за всяка страна на елемент (отгоре, отдясно, отдолу и отляво).

---

Марж - отделни страни

CSS има свойства за определяне на полето за всяка страна на елемент:

• margin-top
• margin-right
• margin-bottom
• margin-left

Всички свойства на полето могат да имат следните стойности:

• автоматично - браузърът изчислява маржа
• дължина - указва поле в px, pt, cm и т.н.
• % - указва поле в% от ширината на съдържащия елемент
• наследява - указва, че полето трябва да бъде наследено от родителския елемент

Съвет: Разрешени са отрицателни стойности.

Пример

Задайте различни полета за четирите страни на елемент <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Опитайте сами »

---

---

Марж - стенографско свойство

За да съкратите кода, е възможно да зададете всички свойства на полето в едно свойство.

В marginимота е краткият имот за следните индивидуален марж свойства:

• margin-top
• margin-right
• margin-bottom
• margin-left

И така, ето как работи:

Ако marginсвойството има четири стойности:

• марж: 25px 50px 75px 100px;
  • горният марж е 25px
  • дясното поле е 50px
  • долният марж е 75px
  • лявото поле е 100px

Пример

Използвайте стенографското свойство margin с четири стойности:

p {
  margin: 25px 50px 75px 100px;
}

Опитайте сами »

Ако marginсвойството има три стойности:

• марж: 25px 50px 75px;
  • горният марж е 25px
  • дясното и лявото поле са 50px
  • долният марж е 75px

Пример

Използвайте стенографското свойство margin с три стойности: 

p {
  margin: 25px 50px 75px;
}

Опитайте сами »

Ако marginсвойството има две стойности:

• марж: 25px 50px;
  • горните и долните полета са 25px
  • дясното и лявото поле са 50px

Пример

Използвайте стенографското свойство margin с две стойности: 

p {
  margin: 25px 50px;
}

Опитайте сами »

Ако marginимотът има една стойност:

• марж: 25px;
  • и четирите полета са 25px

Пример

Използвайте стенографското свойство margin с една стойност: 

p {
  margin: 25px;
}

Опитайте сами »

---

Автоматичната стойност

Можете да зададете свойството margin autoда хоризонтално центрира елемента в неговия контейнер.

След това елементът ще заеме определената ширина, а останалото пространство ще бъде разделено по равно между лявото и дясното поле.

Пример

Използвайте марж: автоматично:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Опитайте сами »

---

Унаследената стойност

Този пример позволява лявото поле на елемента <p class = "ex1"> да бъде наследено от родителския елемент (<div>):

Пример

Използване на наследствената стойност:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Опитайте сами »