Gondolom, mindenki hallott már erről a két CSS tagről, a paddingról, és a marginról. Mindkettő elterjedt dolog, viszont mi a különbség a kettő között? Sokan összekeverik, vagy nem értik. Most tisztázom a dolgokat: nincs bennük semmi bonyolult, csupán el kell magyarázni pár mondatban.

 

Padding

Maga a szó párnázást, párnázatot, bélést jelent. Valami hasonló a funkciója is, és más szóval nagyon le sem tudnám írni. Annyit tudnék a lényegéről mondani, hogy “kitolja” a határokat. Ha például körvonal, vagy háttér van megadva, akkor amennyi pixelt megadunk neki, annyira tolódik ki a dolog viszont  a tartalma nem. Tehát magyarul körvonalat csinál a képnek, cellának, vagy bármi másnak. Alap formája:

padding: 5px;

Így minden irányban megadjuk a paddingot. Viszont ha csak bizonyos oldalakra szeretnénk megadni, akkor ez ennyit jelent:

padding-left: 5px; /*padding bal oldalon*/
padding-right: 5px; /*padding obb oldalon*/
padding-top: 5px; /*padding fölül*/
padding-bottom: 5px; /*padding alul*/

 

Margin

A margin tulajdonképpen nem más, mint a margó. Ez a képen, szövegen kívül jelenik meg. A margó szóval szerintem mindent elmagyaráztam, hiszen ezzel pl a képnek a szövegtől való távolságát adhatjuk meg. Ez is hasonlóan működik, mint a padding:

margin: 5px;

Ugyanúgy a sima margin taggel körbe adhatjuk meg a margint. Viszont itt is ugyanúgy meg lehet határozni a különböző oldalak marginját:

margin-left: 5px; /*margó bal oldalon*/
margin-right: 5px; /*margó jobb oldalon*/
margin-top: 5px; /*margó fölül*/
margin-bottom: 5px; /*margó alul*/

 


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *