Doboz modell - Margó (margin) tulajdonság

A margin tulajdonság segítségével lehet beállítani egy doboz margójának szélességét mind a négy oldalon. Oldalanként külön is állítható a margó szélessége a margin-top (felső margó), a margin-right (jobb oldali margó), a margin-left (bal oldali margó) és a margin-bottom (alsó margó) tulajdonságok segítségével.

Megadható értékek:

• Hosszérték (pédául: 20px)
• Százalékos érték (például: 10%) A margó szélessége a tartalmi elem szélességének megadott százaléka lesz.
• auto: automatikusan kiszámítva.
• inherit: érték a szülő elemtől örökölve.

Automatikus öröklődés: Nincs

Ha a megadott érték auto, akkor a böngésző automatikusan kiszámítja az adott margó értékét. Ennek a jobb és bal oldali margó esetén van a legnagyobb jelentősége. Ha mindkettő értéke auto, akkor a böngésző által kiszámított érték egyenlő lesz a jobb és a bal oldalra. Tehát vízszintes irányban a doboz tartalma a rendelkezésre álló hely közepére lesz igazítva.

A margó színe mindig átlátszó, vagyis a mögötte lévő elem (háttér)színe látszik. (A példákban a margókat azzal a trükkel festettem be világoskékre, hogy egy <DIV> taggal világoskék hátteret adtam a kívánt területnek.)

Az egymás után következő blokk szintű elemek margóit a böngészők függőleges irányban összevonják. A következő példában az első bekezdés margója 20 pixel, a másodiké pedig 35 pixel. A két sor között is csak 35 pixel hely van, nem adódik össze a két margó mérete.

<div style="background-color: #00d0ff; padding: 1px;
   border-width: 0px; margin: 0px">

<p style="background-color: #ffff00; padding: 0px;
   border-style: none; margin: 20px">
Ez egy rövid szöveg.</p>

<p style="background-color: #ffff00; padding: 0px;
   border-style: none; margin: 35px">
Ez egy másik rövid szöveg.</p>

</div>

Ami így jelenik meg:

Helykitöltés (padding) tulajdonság »