CSS-margó

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A margók az elemek körüli tér létrehozására szolgálnak, bármely meghatározott határon kívül.

This element has a margin of 70px.

Próbálja ki Ön is →

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

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

CSS-margók

A CSS margó tulajdonságai az elemek körüli tér létrehozására szolgálnak, meghatározott határokon kívül.

A CSS segítségével teljes ellenőrzése alatt áll a margók felett. Vannak ingatlanok egy elem mindkét oldalának margójának beállításához (felső, jobb, alsó és bal).

Margó - egyéni oldalak

A CSS rendelkezik tulajdonságokkal az egyes margók megadásához egy elem oldala:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Az összes margó tulajdonság a következő értékekkel rendelkezhet:

  • auto - a böngésző kiszámítja a margót

  • hosszúság - margót ad meg px, pt, cm stb.

  • % - margót ad meg %-ban a tartalmazó elem szélességéhez képest

  • inherit - megadja, hogy a margót a szülőelemtől örököljék

Tipp: A negatív értékek megengedettek.

Példa

Állítson be különböző margót egy <p> elem mind a négy oldalához:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Próbálja ki Ön is →

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

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Margó - Gyorsírási tulajdonság

A kód lerövidítéséhez lehetőség van az összes margó tulajdonság megadására egy ingatlan.

A margó tulajdonság a következő egyedi margótulajdonságok rövidített tulajdonsága:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

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

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

margin: 25px 50px 75px 100px;

  • a felső margó 25 képpont

  • a jobb margó 50 képpont

  • az alsó margó 75 képpont

  • a bal margó 100 képpont

Példa

Használja a margógyorsítás tulajdonságot négy értékkel:

p {
  margin: 25px 50px 75px 100px;
}

Próbálja ki Ön is →

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

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

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

<hr>

</body>
</html>

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

margin: 25px 50px 75px;

  • a felső margó 25 képpont

  • a jobb és a bal margó 50 képpont

  • az alsó margó 75 képpont

Példa

Használja a margógyorsítás tulajdonságot három értékkel:

p {	margin: 25px 50px 75px;
}

Próbálja ki Ön is →

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

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

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

<hr>

</body>
</html>

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

margin: 25px 50px;

  • a felső és az alsó margó 25 képpont

  • a jobb és a bal margó 50 képpont

Példa

Használja a margógyorsítás tulajdonságot két értékkel:

p {	margin: 25px 50px;
}

Próbálja ki Ön is →

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

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

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

<hr>

</body>
</html>

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

margin: 25px;

  • mind a négy margó 25 képpont

Példa

Használja a margógyorsítás tulajdonságot egy értékkel:

p {
  margin: 25px;
}

Próbálja ki Ön is →

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

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

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

<hr>

</body>
</html>

Az automatikus érték

A margó tulajdonságot auto értékre állíthatja, hogy az elemet vízszintesen középre állítsa a tárolójában.

Az elem ekkor a megadott szélességet és a maradék helyet foglalja el egyenlően lesz elosztva a bal és a jobb margó között.

Példa

Margó használata: auto:

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

Az öröklött érték

Ez a példa lehetővé teszi, hogy az

elem bal margóját a szülőelemtől örököljük (<div>):

Példa

Az öröklési érték használata:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

Minden CSS-margó tulajdonság

margin

Egy gyorsított tulajdonság az összes margó tulajdonság beállításához egy deklarációban

margin-bottom

Beállítja egy elem alsó margóját

margin-left

Beállítja egy elem bal margóját

margin-right

Beállítja egy elem jobb margóját

margin-top

Beállítja egy elem felső margóját