Tamás Ferenc: Weblapkészítés HTML alapokon – 8. rész

CSS alapismeretek 3. rész

22.1. fejezet: CSS alapismeretek – Dobozmodell

A CSS segítségével sok olyan látványt is megoldhatunk, amit a HTML-lel egyáltalán nem, vagy csak elég nehezen. Ezt mutatja be a következő ábra is:

Kép eredetije: https://www.w3schools.com/css/css_boxmodel.asp

Az egyes részek magyarázata:
-    margin = margó. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=5 
-    border = keret. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=4
-    padding = helyhagyás. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=6
-    Tartalom. Ez önmagáért beszél. Lehet szöveg, kép, vagy bármi hasonló.

A fenti ábrát a következő részlettel kaphatjuk meg:

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Megjegyzés: amikor egy elem szélességét vagy magasságát szabályozzuk, akkor csak a „Tartalom” részt szabályozzuk, tehát csak óvatosan a méretekkel!

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_boxmodel.asp