Marginesy

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 35 z 76.

W CSS margin to przestrzeń wokół elementu, na zewnątrz wszystkich zdefiniowanych obramowań. To kolejny istotny element modelu pudełkowego. Marginesy służą do tworzenia przestrzeni między elementami, oddzielając je od siebie.

Możesz kontrolować margines z każdej z czterech stron elementu (u góry, po prawej, u dołu i po lewej) niezależnie lub za pomocą skróconego zapisu.

Oto podstawowa składnia użycia właściwości margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Margines po górnej stronie elementu.
margin-right: Margines po prawej stronie elementu.
margin-bottom: Margines po dolnej stronie elementu.

margin-left: Margines po lewej stronie elementu.
value: Żądana wartość marginesu, którą można podać w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS.

Możesz też użyć skróconej notacji, aby jednocześnie ustawić margines ze wszystkich czterech stron, na przykład:

p {
    margin: 20px; /* Ustawia taki sam margines ze wszystkich czterech stron */
}

div {
    margin: 10px 25px; /* Ustawia górny i dolny margines na 10px, a lewy i prawy na 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Ustawia margines osobno dla każdej strony */
}

W tym przykładzie wszystkie elementy <p> mają margines o wartości 20px ze wszystkich stron, wszystkie elementy <div> mają margines górny i dolny o wartości 10px oraz margines lewy i prawy o wartości 25px, a wszystkie elementy z klasą button mają margines górny o wartości 15px, prawy o wartości 30px, dolny o wartości 10px i lewy o wartości 5px.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>) i elementem div (<div>). Twoim zadaniem jest użycie właściwości margin, aby dodać odstęp wokół tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw wartość margin na 20px ze wszystkich stron.
Napisz regułę CSS, która wybiera element <div>. Ustaw górny i dolny margin na 10px, a lewy i prawy margin na 30px.

Spróbuj swoich sił

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>