Уплътнение и поле и как да ги използвате, CSS

Днес, ние ще работим върху разбирането на разликата между HTML пълнеж (вата) и марж (космоса) в CSS. Но първо нека да се справят с техния синтаксис. Има няколко начина да се пишат тези свойства: нормални и кондензирани:

Уплътнение и поле в CSS

Обичайната форма на разглежданите свойства на записа по-лесно да се разбере, защото тя е подобна на други записи в стил:

От друга страна, в стенограмите CSS съчетава всички тези функции в една обща собственост "пълнеж".

В уплътнение и поле има четири стойности: отгоре, отдясно и отдолу и си тръгна. В съкратена нотация показано по-горе са дадени същите четири стойности всеки разделени от интервал. Първият от четирите стойности на горната граница, а след това обратно към правото, от дъното (уплътнение отдолу HTML) и в ляво:

Този пост може да бъде съкратен до три стойности на запис, ако лявата и дясната уплътнение / марж идентични. Например, ако горната вдлъбнатината е 30px. ляво и дясно на 10px. и дъното - 40px. можете да използвате следния вид:

Намалена до две стойности!

Ако горната и долната подложка / марж равен, а отляво и отдясно уплътнение / марж също е едно и също, че е възможно да посочите само двете стойности. В този пример, ние имаме горни и долни граници, които са 10px. и полета отляво и отдясно - по 20px. Нашата CSS ще бъде, както следва:

Само една стойност!

Нашата най-новата версия на стенограмите за уплътнение и поле HTML съдържа само една стойност. Този запис може да се използва, когато всички маржове (горе, долу, дясно и ляво) имат една и съща стойност. Ако искахме, че всички страни имат граници на 20px. СГО ще изглежда така:

Когато формат на запис, за да се използва? Например, ако искате да посочите само долния елемент на вдлъбнатината, аз ще използвам нормален запис, тъй като е необходимо да се приложи към само едната страна: уплътнение дъно: 30px;

Как да работим и MARGIN ПЪЛНЕЖ

Между тези два имота има голяма разлика. Padding се използва за определяне на пространство вътре в контейнер HTML-елемент. Допустимо се използва за определяне на пространството около външните страни на елементите.

Представете си, че пълнежът носи на вас зимно палто. Герб част от теб, но ако Хвърлих боя във вас, то ще обхване по-широк район, отколкото ако не сте имали това палто.

Можете също така да мисля за пълнежа като пълнител в картонена кутия. Когато попълните кутия с пяна, те задържа съдържанието им на разстояние от границата на наказателното поле. Допълване на СГО се прави същото.

ПЪЛНЕЖ MARGIN и пример сайт

Помислете за имоти с елементи в примерите. Ще започнем с параграф (таг

), След това добавете към него цвета на фона и добавете 30px подложка от всяка страна.

По-долу в ляво показва, че този параграф с пълнеж 30px около него. В изображението по-надясно, аз използвах инструменти на Google Chrome. да покаже къде HTML тапицерията започва / свършва за тази позиция. Зеленият цвят в изображението по-долу - подложка. която е разположена около контейнера. Тъмно син цвят на фона изпълва интериор региона:

Сега добави параграф, марж. Ще добавя пълнеж отгоре и отдолу 30px. и 20px наляво и надясно. По-долу е снимката в ляво показва как това се е променило с маржа на пасаж. Действителната ширината на изображението е станал по-малък, защото на границата избутва още граници HTML елементи. От дясната страна показва, че оранжевия цвят - този марж около елемента. марж е винаги отвъд подложка и тъмно син фон не се разпростира върху границата на площ:

Ако все още са объркани как да се използва подложка и марж HTML. тогава е време да експериментирате! Колкото повече използвате CSS свойства. и промените стойността, по-доброто разбиране на това как те работят.

Превод на статията "CSS ПЪЛНЕЖ VS. Марж и как да ги използвате ", се получава по екип по проекта Friendly Уеб дизайн от А до Я. на