0 szavazat
(4,8e pont) által 
által újranyitott

Hogyan számolódik az elem szélessége és magassága?

Ha van egy ilyenem:

.some-div {
  width: 100px;
  padding: 10px;
  border: 10px;
  margin: 10px;
}

Akkor az elemnek a szélessége 100px lesz vagy 10+10+10+100+10+10+10=160px?

1 válasz

0 szavazat
(4,8e pont) által 
által kiválasztott
 
Legjobb válasz

Kezdjük az elejéről, és haladjunk lépésről lépésre.

Amiről most beszélünk azt CSS box modelnek hívják. A box model az első dolog, amit meg kell értened, ha szeretnél elemeket elhelyezni egy weboldalon.

Minden egyes HTML elem megfelel a box model szabályainak, amelyek a következők:

  • minden HTML elem elképzelhető egy boxként (négyzetként)
  • minden ilyen box (HTML elem) 4 részből áll: content (tartalom), padding, border és margin
  • ezek így is következnek egymás után belülről kifelé.

Alapértelmezetten egy HTML elem paddingje, bordere és marginja nulla.

Ha ez tiszta, akkor jön a következő lépés: minden HTML elem rendelkezik szélességgel (width) és magassággal (height).

És most jön a trükk: az, hogy a width-be és a height-ba beleszámítódik-e a padding, border, margin vagy sem, a CSS-edtől függ. Egészen pontosan egy box-sizing nevű tulajdonságtól (property).

Ha a box-sizing-nak nem adsz meg értéket, akkor a HTML elemed magasságába és szélességébe beleszámít minden. Nézd meg pl. ezt a kódot:

.some-div {
  width: 100px;
  padding: 10px;
  border: 10px;
  margin: 10px;
}

A .some-div elem szélessége bal margin + bal border + bal padding + content + jobb padding + jobb border + jobb margin lesz, azaz összesen 160px.

Hiába látod, hogy a width property 100px.

Erre a problémára kínál megoldást a box-sizing: border-box beállítás.

Ha ezt beírod, akkor a HTML elemed renderelt szélessége mindig pontosan annyi lesz, mint amit a width propertybe beírtál. És ebben bele fog számítani a padding és a border.

A fenti példát kiegészítve:

.some-div {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 10px;
  margin: 10px;
}

A content, padding, border együttes szélessége 100px lesz, viszont a konkrét contented szélessége le fog csökkeni 60px-re, mert a padding és border szélesség ennek rovására fog megjelenni.

A margin megmarad ezen kívül. Ez elsőre inkonzisztensnek tűnhet, de ha belegondolsz, mégsem az. A margin, azaz margó igazából az elemek közötti távolságot befolyásolja.

Logikus, hogy ez a “box”-on kívül maradjon minden esetben.

(Az más kérdés, hogy itt a CSS saját dokumentációja is egy picit ködös, mert ebben az esetben a margint nem tekinti a HTML elem részének. Ezt úgy tudod a legkönnyebben áthidalni, ha egyszerűsítesz, és a margóra az elemek közötti dologként tekintesz. :slightly_smiling_face:)

Szóval, röviden összefoglalva:

  • box-sizing beállítás nélkül az elemed szélességébe beletartozik minden, és ezek a content szélességéhez pluszban hozzáadódnak.
  • box-sizing: border-box esetén a content szélessége lesz az elem megjelenő szélessége, és az esetleges padding illetve border ezen belül jelenik meg.

213 kérdés

207 válasz

56 hozzászólás

256 felhasználó

Üdvözlet a "Kérdezd Lacit" weboldalon, ahol programozás témában kérdezhetsz és kaphatsz választ a közösség tagjaitól.
...