Lecke 11 mező (margin) és kitöltés (padding)

Ez nagyon egyszerű, de ugyanakkor és a megfelelő tanulságot. Lássuk, mi a különbség mozgástér padding. Ehhez még egyszer felidézni a blokk modell CSS.

MARGIN (Fields) - a távolság a határoló (keret) egységet a következő elem, vagy, ha nem, a széle a dokumentumot.

PADDING (behúzás) -, mint a belső Rasctojanie, között a határ (keret) és a blokk tartalmát.

És nézzük csak nézd primerchik: létre három stílus, három különböző szakaszok, különböző margin és padding és nézd meg az eredményt:

.p1 háttér színét. # FFE446;
border: 1px szilárd piros;
árrés. 70 képpont;
>
.p2 háttér színét. # FFE446;
border: 1px szilárd piros;
padding. 70 képpont;

>
.p3 háttér színét. # FFE446;
border: 1px szilárd piros;
árrés. 50px;
padding. 20px;
>

Nos, hogyan kell érteni? ha elolvassa a szöveget a példát, hogy pontosan megértette.

Hozzáadása az ismerős kulcsszavak: felső, jobb, alsó, bal, és beállíthatja a különbözetet a területen, illetve felső, jobb, alsó, bal.

p margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 150px;
>

Ugyanaz, csak egy rövidített:

Ie mivel csak a bal oldali mezőben eltér a többitől, csak rögzített általános mezőbe, majd befejeztük az érték a bal oldali mezőben, és kapott ugyanazt az eredményt, mint az első példában.

Az is lehetséges kiviteli alakja egy ilyen üzenet:

Ie értékek vannak írva az óramutató járásával megegyező: felső, jobb, alsó, bal.

Bizonyos esetekben jobb, ha árrés, és amelyben a területeken?

És ez csak rajtad áll, én csak adni néhány alapvető különbség:

  • Kitöltés (padding) vannak elhelyezve a készülék belsejében, és a mező (árrés) - azon kívül;

Háttér blokk és a háttérképet csak a padding, de nem a pályán. Fields mindig átlátható, és rajtuk keresztül ragyog háttér szülő.

↑ top ↑