CSS kitöltés

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A kitöltés arra szolgál, hogy teret hozzon létre egy elem tartalma körül, bármely meghatározott szegélyen belül.

This element has a padding of 70px.

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

CSS kitöltés

A CSS padding tulajdonságai arra szolgálnak, hogy helyet teremtsenek körülöttük egy elem tartalma, bármely meghatározott határon belül.

A CSS segítségével teljes ellenőrzése alatt áll a kitöltés felett. Vannak ingatlanok az elem egyes oldalainak (felső, jobb, alsó és bal) párnázásának beállításához.

Bélés - Egyedi oldalak

A CSS-nek vannak olyan tulajdonságai, amelyekkel mindegyikhez megadhatja a kitöltést egy elem oldala:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Az összes kitöltési tulajdonság a következő értékekkel rendelkezhet:

  • hosszúság - megadja a kitöltést px, pt, cm stb.

  • % - megadja a kitöltést a tartalmazó elem szélességének %-ában

  • inherit - megadja, hogy a kitöltést a szülőelemtől kell örökölni

Megjegyzés: A negatív értékek nem megengedettek.

Példa

Állítson be különböző kitöltést a <div> elem mind a négy oldalához:

 div {	padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Padding - Gyorsírási tulajdonság

A kód lerövidítéséhez megadható az összes kitöltési tulajdonság egy ingatlan.

A padding tulajdonság egy rövidített tulajdonság a következő személyhez párnázás tulajdonságai:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Tehát a következőképpen működik:

Ha a padding tulajdonságnak négy értéke van:

padding: 25px 50px 75px 100px;

  • a felső párnázás 25 képpont

  • a jobb oldali kitöltés 50 képpont

  • Az alsó párnázás 75 képpont

  • bal oldali kitöltés 100 képpont

Példa

Használja a padding shorthand tulajdonságot négy értékkel:

 div {	  padding: 25px 50px 75px 100px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

Ha a padding tulajdonságnak három értéke van:

padding: 25px 50px 75px;

  • a felső párnázás 25 képpont

  • A jobb és bal oldali kitöltés 50 képpontos

  • Az alsó párnázás 75 képpont

Példa

Használja a padding shorthand tulajdonságot három értékkel:

 div {	  padding: 25px 50px 75px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>

</body>
</html>

Ha a padding tulajdonságnak két értéke van:

padding: 25px 50px;

  • A felső és alsó párnázás 25 képpontos

  • A jobb és bal oldali kitöltés 50 képpontos

Példa

Használja a padding shorthand tulajdonságot két értékkel:

 div {	  padding: 25px 50px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>

</body>
</html>

Ha a padding tulajdonságnak egy értéke van:

padding: 25px;

  • mind a négy kitöltés 25 képpontos

Példa

Használja a padding shorthand tulajdonságot egy értékkel:

 div {	  padding: 25px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>
</html>

Párnázás és elemszélesség

A CSS width tulajdonsága az elem tartalmi területének szélességét határozza meg. A A tartalomterület egy elem kitöltésén, szegélyén és margóján belüli rész (a dobozos modell).

Tehát, ha egy elemnek meghatározott szélessége van, akkor az elemhez hozzáadott kitöltés is megtörténik hozzá kell adni az elem teljes szélességéhez. Ez gyakran nemkívánatos eredmény.

Példa

Itt a <div> elem szélessége 300 képpont. A <div> elem tényleges szélessége azonban 350 képpont (300 képpont + 25 képpont bal oldali kitöltés + 25 képpont jobb oldali kitöltés):

 div {
  width: 300px;
  padding: 25px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

A szélesség 300 képponton tartásához, függetlenül a kitöltés mennyiségétől, használhatja a box-sizing tulajdonság. Ezáltal az elem megtartja tényleges szélességét; ha növeli a kitöltést, csökken a rendelkezésre álló tartalomterület.

Példa

Használja a box-sizing tulajdonságot, hogy a szélességet 300 képponton tartsa, függetlenül attól párnázás mennyisége:

 div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

További példák

Állítsa be a bal oldali párnázást

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

Ez a példa bemutatja, hogyan kell beállítani egy <p> elem bal oldali kitöltését.

Állítsa be a megfelelő párnázást

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>

Ez a példa bemutatja, hogyan kell beállítani egy <p> elem megfelelő kitöltését.

Állítsa be a felső párnázást

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>

Ez a példa bemutatja, hogyan kell beállítani egy <p> elem felső kitöltését.

Állítsa be az alsó párnázást

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

Ez a példa bemutatja, hogyan kell beállítani egy <p> elem alsó kitöltését.

Minden CSS kitöltő tulajdonság

padding

Gyorsírási tulajdonság az összes kitöltési tulajdonság beállításához egy deklarációban

padding-bottom

Beállítja egy elem alsó párnázását

padding-left

Beállítja egy elem bal oldali kitöltését

padding-right

Beállítja az elem megfelelő kitöltését

padding-top

Beállítja egy elem felső kitöltését