Padding és margin tulajdonságok és hogyan kell használni őket, css

Ma fogunk dolgozni, hogy megértse a különbség a HTML padding (padding) és letéti (világűr) a CSS. De először foglalkoznak a szintaxis. Számos módja van, hogy írjon e tulajdonságok: normál és sűrített:

Padding és Margó a CSS

A szokásos formáját a helység tulajdonságait felvétel könnyebb megérteni, mert hasonlít az összes többi stílus bejegyzések:

Másrészt, gyorsírásos CSS egyesíti ezeket a funkciókat egy közös tulajdon „padding”.

A kitöltés és a margó négy értékek: felső, jobb, alsó és bal. A rövidített jelölés fenti kapnak Ugyanaz a négy értéke egymástól elválasztott térben. Az első a négy érték a felső, majd vissza jobbra, alulról (padding alsó HTML) és a bal oldalon:

Ez a bejegyzés lehet rövidíteni, hogy három érték rögzítésére, ha a bal és a jobb padding / árrés azonosak. Például, ha a felső behúzás 30px. A balra és jobbra 10px. és az alsó - 40px. akkor használja az alábbi űrlapot:

Csökkent a két érték!

Ha a felső és az alsó padding / árrés egyenlő, és a bal és a jobb padding / árrés is ugyanaz, akkor lehetséges, hogy adja csak a két érték. Ebben a példában, hogy van egy felső és alsó margó, amelyek egyenlő 10px. és a bal és jobb margó - a 20px. A CSS a következő lesz:

Csak egy értéket!

A legújabb változata a rövidítése a kitöltés és a margó HTML csak egyetlen érték. Ezt a rekordot akkor használható, ha minden margó (felső, alsó, jobb és bal) azonos értékű. Ha akarnánk, hogy valamennyi félnek margóján 20px. A CSS nézne ki:

Amikor egy felvételi formátum kezelhető? Például, ha meg szeretné adni csak az alsó eleme a behúzás, fogom használni a normál felvétel, mivel ez szükséges alkalmazni egy ingatlan csak az egyik oldalára: padding-bottom: 30px;

Hogyan működik és MARGIN PADDING

E között a két tulajdonság van egy jelentős különbség. Padding meghatározására használják a teret a tartály belsejében HTML-elem. Margó meghatározására használják a tér körül a külső határokat az elemek.

Képzeljük el, hogy a kitöltés visel rád télikabátot. Kabát egy részét, de ha dobtam festék van, akkor fedezné egy nagyobb területen, mint ha nem lenne ez a kabát.

Azt is gondolom, a padding töltőanyagként egy kartondobozban. Ha kitölti egy doboz hab, akkor tartsa a tartalmukat egy távolság a széle a doboz. Padding a CSS csinál ugyanaz.

PADDING tőkét és a példa oldal

Tekintsük tulajdonságok elemekkel a példákban. Kezdjük bekezdés (tag

), Majd adja hozzá a háttér színét, és adjunk hozzá 30px szegély minden oldalon.

Az alábbiakban a bal oldalon látható, hogy e bekezdés padding 30px körül. A kép jobbra, én használtam a Google Chrome-eszközöket. meg ott, ahol a padding HTML megkezdi / befejezi azt az elemet. A zöld szín az alábbi képen - egy szivacs. amely körül van elhelyezve a tartály. Sötétkék háttérszín tölti be a belső tartomány:

Most adjunk hozzá egy bekezdés árrés. Majd adjunk hozzá egy felső margó és alsó 30px. és 20px balra és jobbra. Az alábbiakban a képre, a bal oldalon látható, hogy ez megváltozott, és a folyosón árrés. A tényleges szélessége a kép kisebb lesz, mert az árrés kitolja másik HTML elem határait. A jobb oldalon látható, hogy a narancssárga szín - ez az árrés elem körül. margó mindig túl padding és sötétkék alapon nem terjed ki a terület margin:

Ha még mindig zavaros, hogyan kell használni a kitöltés és a margó HTML. akkor itt az ideje, hogy a kísérlet! Minél többet használja a CSS tulajdonságokat. és módosítsa az értéket, a jobb megértését, hogyan működnek.

Fordítása a cikk „CSS PADDING VS. MARGIN ÉS HASZNÁLATUK „állítjuk elő a projekt csapat barátságos Web design tól Z-ig