Margók hatása szövegnél

Margin és padding, szövegre gyakorolt hatása

1. Pozitív margin-top

Önálló div szakaszoknál:
IE és MA eltérően jeleníti meg.
A megadott értéknek megfelelően mindegyik lejjebb helyezi a szövegsorokat.

IE: A meghatározott háttérszínt, teljes div szakasz magasságában megjeleníti.
MA: A meghatározott háttérszínt, csak a szöveg területén.
Ezért a monitoron olyan jelenséget kapunk, mintha nem is a szövegsorra, hanem a teljes div szakaszra vonatkozna a felső margó, és a két div szakasz között, a megadott értéknek megfelelő üres terület lesz látható.

Egymás melletti div szakaszoknál:
IE. és MA. Egyformán jeleníti meg
A megadott értéknek megfelelően lejjebb mozgatják a címsórt és bekezdéseinket.
De ugyan ennyivel megnövelik a div szakasz magasságát.
Az alattuk elhelyezkedő div szakaszt lejjebb mozgatják.

2. Negatív margin-top

IE és MA egyformán jeleníti meg.
A teljes div szakaszt csökkenti felfelé, még el nem tűnik a szövegsor.

Float esetében:
IE. Minden más div szakaszt a helyén hagy.
MA: ha a mellette lévő felső szélét elhagyja például a 4. div szakaszt, akkor a 4. div balra mozdul a container széléig, és magával húzza az 5. div szakaszt.

Vissza a lap elejére

3. Pozitív margin-bottom

IE és MA egyformán jeleníti meg.
Floattolt div szakaszoknál

Önálló div szakaszoknál:
IE: Az utolsó szövegsor alatt a div szakaszt a megadott értékkel tovább növeli a háttérszínnel együtt
MA: AZ utolsó szövegsor alatt, a div szakaszt tovább növeli, de a háttérszínt nem növeli tovább. Így a div szakasz egy bizonyos részén látható a háttérszín, a további részeken nem.

Vissza a lap elejére

4. Negatív margin-bottom értéknél

IE és MA egyformán jeleníti meg.
A szövegsorokat felfelé mozgatja. Az előtte elhelyezkedő div szakasz szövegsorára ráhelyezi azt a szövegsort, melynél megadtuk a negatív értéket.
A negatív érték növelése azt eredményezi, hogy a szöveg túlhalad a monitor tetején és láthatatlan lesz.

5. Pozitív margin-right értéknél

IE és MA egyformán jeleníti meg, margint és paddingot A címsort és szövegsorokat, az adott div szakasz bal oldaláig mozgatják, Ettől kezdve hiába adunk nagyobb értéket semmi sem változik.

6. Negatív margin-right értéknél

IE és Ma nem veszi figyelembe.

Vissza a lap elejére

7. Pozitív margin-left értéknél

A kettő közötti különbséget csak akkor láthatjuk, ha a címsort aláhúzzuk.
A szöveget, mindegyik egyformán mozgatja a megadott irányba.
Padding-left belső margógnál a szöveg aláhúzása a div szakasz teljes szélességben látható.
A szöveg elmozdulás az aláhúzást nem befolyásolja.
Margin-left külső margónál, Az aláhúzási vonal eleje, követi a szöveget, így mindig a szöveg kezdeténél kezdődik a vonal.

A balos, left külső és belső margókat a végtelenségig növelhetjük.
IE: Egy adott méret után növeli a div szakaszt, akár a végtelenségig is. De a szöveg a div szakaszon belül marad.
Div szakasz hossza, túl nagy érték esetén = megadott margó érték + a szövegsorban található leghosszabb szó által elfoglalt szélesség
MA: A div szakaszt nem növeli, de a szöveget szintén a végtelenségig mozgatja jobbra. Így a szöveg a body területén jelenik meg.

Vissza a lap elejére

8. Negatív margin-left értéknél

IE és MA egyformán jeleníti meg.
Margin esetében: Önálló div szakasznál, az érték növelésével teljesen eltűnik a szöveg.
Egymás mellet lévő div szakaszoknál, csak a div szakasz széléig tudjuk mozgatni a címsort, de bekezdések szövegénél, az érték növelésével eltűnnek a szövegsorok.
Padding esetében: A címsort és a szövegsorokat is csak az adott div szakasz bal széléig mozgathatjuk. Nagyobb értékmegadást IE és MA nem veszi figyelembe.

Vissza a lap elejére

9. Pozitív padding top

IE és MA egyformán jeleníti meg.
A megadott értéknek megfelelően lejjebb mozgatja a szövegsorokat, addig még a szövegsorok utolsó sora eléri a div szakasz alsó szélét. Ettől kezdve megnöveli a div szakasz magasságát.

Vissza a lap elejére

10. Negatív padding top

Negatív padding top értéknél: IE és MA nem veszi figyelembe.

Vissza a lap elejére

11. Pozitív padding bottom

IE és MA egyformán jeleníti meg.
A megadott szövegsorok aljánál, megnöveli a div szakasz magasságát lefelé, és az alatta lévő div szakaszokat lejjebb mozgatja.

12. Negatív padding bottom értéknél

IE és MA nem veszi figyelembe.

Vissza a lap elejére

13. Pozitív padding-right értéknél

IE és MA egyformán jeleníti meg, margint és paddingot A címsort és szövegsorokat, az adott div szakasz bal oldaláig mozgatják, Ettől kezdve hiába adunk nagyobb értéket semmi sem változik.

14. Negatív margin és padding right értéknél

IE és Ma nem veszi figyelembe.

Vissza a lap elejére

15. Pozitív padding-left értéknél

A kettő közötti különbséget csak akkor láthatjuk, ha a címsort aláhúzzuk.
A szöveget, mindegyik egyformán mozgatja a megadott irányba.
Padding-left belső margógnál a szöveg aláhúzása a div szakasz teljes szélességben látható.
A szöveg elmozdulás az aláhúzást nem befolyásolja.
Margin-left külső margónál, Az aláhúzási vonal eleje, követi a szöveget, így mindig a szöveg kezdeténél kezdődik a vonal.

A balos, left külső és belső margókat a végtelenségig növelhetjük.
IE: Egy adott méret után növeli a div szakaszt, akár a végtelenségig is. De a szöveg a div szakaszon belül marad.
Div szakasz hossza, túl nagy érték esetén = megadott margó érték + a szövegsorban található leghosszabb szó által elfoglalt szélesség
MA: A div szakaszt nem növeli, de a szöveget szintén a végtelenségig mozgatja jobbra. Így a szöveg a body területén jelenik meg.

16. Negatív padding-left értéknél

IE és MA egyformán jeleníti meg.
Margin esetében: Önálló div szakasznál, az érték növelésével teljesen eltűnik a szöveg.
Egymás mellet lévő div szakaszoknál, csak a div szakasz széléig tudjuk mozgatni a címsort, de bekezdések szövegénél, az érték növelésével eltűnnek a szövegsorok.
Padding esetében: A címsort és a szövegsorokat is csak az adott div szakasz bal széléig mozgathatjuk. Nagyobb értékmegadást IE és MA nem veszi figyelembe.

Vissza a lap elejére