CSS грунд

В тази глава се говори за маржовете (марж на собственост) и пълнеж (уплътнение собственост) члена. Между тези две качества са много сходни, но все пак те са две напълно различни свойства.

Нека да разгледаме тези понятия ..

Невярно (марж) - Това е разстоянието от външната граница на елемента до границата на прозореца на браузъра или родител елемент. Е, границите на единица, която вгражда ни елемент.

Отстъп (уплътнение) - е разстоянието от вътрешния ръб на елемента на съдържанието му на текст, таблици, изображения.

Фигурата ясно показва, тези разстояния, както и мястото, което заемат граница (граница) за него, също не трябва да бъдат забравени.

Разстояния марж и уплътнение посочи:

  • пиксела - в пиксели или други валидни CSS единици.
  • % - процент.
  • авто - маржове и маржовете изчисляват автоматично от браузъра.

Нека се опитаме да направим същото, както е показано на фигурата с помощта на блоковете

и CSS свойства.

Опитайте се да промените стойността на маржин и уплътняващи свойства и ще видите какво е това, което. и ако е така то е разбираемо ход от ..

В горния пример, възлагане на имоти марж и една подложка стойност, ние идентифицирахме област и член пълнеж от четирите страни. За да зададете различни размери полеви и маржовете за всяка от страните на елемента, трябва да посочите две, три или четири аргументи, разделени от интервал. Освен това, в зависимост от броя на изходните стойности ще бъдат различни.

марж: 5px; - единична стойност.
Един стойност - Полета от всички страни.

марж: 5px 40px; - две стойности.
Първата стойност - Задава поле от горните и долните граници.
Втората стойност - Задава областта на левия и десния клетъчни граници.

марж: 5px 40px 20px; - три стойности.
Първата стойност - Задава областта от горната граница на елемент.
Втората стойност - Задава областта на левия и десния клетъчни граници.
Третата стойност - Задава областта от дъното на граничния на елемента.

марж: 5px 40px 20px 1px; - четири стойности.
Първата стойност - Задава областта от горната граница на елемент.
Втората стойност - Задава областта от дясната граница на елемент.
Третата стойност - Задава областта от дъното на граничния на елемента.
Четвъртият стойност - Задава областта от левия границата на елемент.

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

Имоти CSS марж и пълнеж са основни и имат много филиали и свойства.

  • марж-отгоре - топ областта на границата между родител елемент,
  • марж-наляво - поле от лявата граница на майка елемент,
  • марж-надясно - поле от границата на дясната страна на майка елемент,
  • долна граница - поле от дъното на граничен елемент майка.

И съответно пълнеж:

  • вата-отгоре - Изместване от горната граница елемент за неговото съдържание,
  • уплътнение ляв - отместването от лявата граница на елемент за неговото съдържание,
  • уплътнение десен - Изместване от дясната граница на елемент за неговото съдържание,
  • уплътнение дъно - Изместване от долната граница на елемент за неговото съдържание.

Е, аз мисля, че е ясно. ако е необходимо да се определи вдлъбнатината или поле от един елемент на частта е най-добре да използвате един от горните свойства.

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

Избягвайте кратко, и още повече, нула вата част от съдържанието на границите на елемент, особено за текстови блокове. Текст с малки маржове и тире да се чете трудно и "вискозен".

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

Един от начините да се съсредоточи вниманието си върху посетител страница желаната позиция - тази подложка по-голям от обикновено, такава разлика принуди зрителите да гледат и да присъстват на "специални" в текста, който ..