CSS doboz modell

Tartalomjegyzék

Minden HTML-elem doboznak tekinthető.

A CSS Box modell

A CSS-ben a "dobozmodell" kifejezést a tervezésről és az elrendezésről beszélve használják.

A CSS-dobozmodell lényegében egy olyan doboz, amely minden HTML-elemet körülölel. A következőkből áll: margók, szegélyek, kitöltés és a tényleges tartalom. Az alábbi képen látható a doboz modellje:

A különböző részek magyarázata:

Tartalom - A doboz tartalma, ahol szöveg és képek jelennek meg
Padding - Törli a tartalom körüli területet. A párnázás átlátszó
Szegély - A kitöltés és a tartalom körüli szegély
Margó - Megtisztítja a határon kívüli területet. A margó az átlátszó

A dobozmodell lehetővé teszi, hogy szegélyt adjunk az elemek köré, és teret definiáljunk elemek között.

Példa

A dobozmodell bemutatója:

div {
  width: 300px;
  border: 15px solid 
green;
  
padding: 50px;
  
margin: 20px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Egy elem szélessége és magassága

Ahhoz, hogy minden böngészőben megfelelően beállíthassa egy elem szélességét és magasságát, ismernie kell a dobozmodell működését.

Fontos: Ha beállítja a szélességi és magassági tulajdonságokat elemet a CSS-szel, csak beállíthatja a tartalomterület szélességét és magasságát. Nak nek az elem teljes méretének kiszámításához hozzá kell adni a kitöltést, a szegélyeket és a margókat is.

Példa

Ennek a <div> elemnek a teljes szélessége 350 képpont lesz:

div {	width: 320px;
   
padding: 10px;
   
border: 5px solid gray;
   
margin: 0;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>

</body>
</html>

Íme a számítás:

320 képpont (szélesség)
+ 20 képpont (bal + jobb oldali kitöltés)
+ 10 képpont (bal + jobb szegély)
+ 0 képpont (bal + jobb margó)
= 350 képpont

Egy elem teljes szélességét a következőképpen kell kiszámítani:

Teljes elemszélesség=szélesség + bal oldali kitöltés + jobb oldali kitöltés + bal szegély + jobb szegély + bal margó + jobb margó

Egy elem teljes magasságát a következőképpen kell kiszámítani:

Teljes elemmagasság=magasság + felső párnázás + alsó párnázás + felső szegély + alsó szegély + felső margó + alsó margó

Megjegyzés: A margó tulajdonság a doboz teljes területére is hatással van elfoglalja az oldalt, de a margó nem számít bele a tényleges méretbe a doboz. A doboz teljes szélessége és magassága a szegélynél megáll.