Okraj CSS

Obsah

    Zobrazit obsah

Okraje se používají k vytvoření prostoru kolem prvků mimo jakékoli definované hranice.

This element has a margin of 70px.

Zkuste to sami →

<!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>

Okraje CSS

Vlastnosti CSS margin se používají k vytvoření prostoru kolem prvků, mimo jakékoli definované hranice.

S CSS máte plnou kontrolu nad okraji. Existují vlastnosti pro nastavení okraje pro každou stranu prvku (nahoře, vpravo, dole a vlevo).

Okraj - jednotlivé strany

CSS má vlastnosti pro určení okraje pro každý z nich strana prvku:

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

Všechny vlastnosti okraje mohou mít následující hodnoty:

  • auto - prohlížeč vypočítá marži

  • délka - určuje okraj v px, pt, cm atd.

  • % - určuje okraj v % šířky obsahujícího prvku

  • dědit - určuje, že okraj by měl být zděděn z nadřazeného prvku

Tip: Záporné hodnoty jsou povoleny.

Příklad

Nastavte různé okraje pro všechny čtyři strany prvku <p>:

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

Zkuste to sami →

<!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>

Marže - těsnopisná vlastnost

Pro zkrácení kódu je možné zadat všechny vlastnosti marginu v jednu nemovitost.

Vlastnost margin je zkrácená vlastnost pro následující jednotlivé vlastnosti okraje:

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

Funguje to takto:

Pokud má vlastnost margin čtyři hodnoty:

margin: 25px 50px 75px 100px;

  • horní okraj je 25 pixelů

  • pravý okraj je 50px

  • spodní okraj je 75 pixelů

  • levý okraj je 100px

Příklad

Použijte zkrácenou vlastnost margin se čtyřmi hodnotami:

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

Zkuste to sami →

<!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>

Pokud má vlastnost margin tři hodnoty:

margin: 25px 50px 75px;

  • horní okraj je 25 pixelů

  • pravý a levý okraj je 50px

  • spodní okraj je 75 pixelů

Příklad

Použijte zkrácenou vlastnost margin se třemi hodnotami:

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

Zkuste to sami →

<!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>

Pokud má vlastnost margin dvě hodnoty:

margin: 25px 50px;

  • horní a dolní okraje jsou 25 pixelů

  • pravý a levý okraj je 50px

Příklad

Použijte zkrácenou vlastnost margin se dvěma hodnotami:

p {	margin: 25px 50px;
}

Zkuste to sami →

<!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>

Pokud má vlastnost margin jednu hodnotu:

margin: 25px;

  • všechny čtyři okraje jsou 25px

Příklad

Použijte zkrácenou vlastnost margin s jednou hodnotou:

p {
  margin: 25px;
}

Zkuste to sami →

<!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>

Automatická hodnota

Vlastnost margin můžete nastavit na auto a prvek v kontejneru horizontálně vycentrovat.

Prvek pak zabere zadanou šířku a zbývající prostor budou rovnoměrně rozděleny mezi levý a pravý okraj.

Příklad

Použít okraj: auto:

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

Zkuste to sami →

<!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>

Dědičná hodnota

Tento příklad umožňuje zdědit levý okraj prvku

z nadřazeného prvku (<div>):

Příklad

Použití dědičné hodnoty:

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

Zkuste to sami →

<!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>

Všechny vlastnosti okrajů CSS

margin

Zkrácená vlastnost pro nastavení všech vlastností okraje v jedné deklaraci

margin-bottom

Nastaví spodní okraj prvku

margin-left

Nastaví levý okraj prvku

margin-right

Nastaví pravý okraj prvku

margin-top

Nastaví horní okraj prvku