Odstęp wewnętrzny

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

W CSS padding to przestrzeń między zawartością elementu a jego obramowaniem. Padding służy do utworzenia wizualnego odstępu wokół zawartości, dzięki czemu staje się ona bardziej czytelna i atrakcyjniejsza wizualnie. Możesz niezależnie kontrolować padding ze wszystkich czterech stron elementu (u góry, po prawej, u dołu i po lewej) lub użyć skróconej notacji.

Oto podstawowa składnia używania właściwości padding:

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

padding-top: Wypełnienie po górnej stronie elementu.
padding-right: Wypełnienie po prawej stronie elementu.
padding-bottom: Wypełnienie po dolnej stronie elementu.

padding-left: Dopełnienie po lewej stronie elementu.
value: Żądana wartość dopełnienia, którą można określić w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS.

Możesz także użyć skróconej notacji, aby ustawić dopełnienie jednocześnie dla wszystkich czterech stron, na przykład:

p {
    padding: 20px; /* Ustawia jednakowy padding ze wszystkich czterech stron */
}

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

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

W tym przykładzie wszystkie elementy <p> (akapitów) mają dopełnienie 20px ze wszystkich stron, wszystkie elementy <div> mają dopełnienie u góry i na dole wynoszące 10px oraz dopełnienie po lewej i prawej stronie wynoszące 25px, a wszystkie elementy z klasą button mają dopełnienie u góry wynoszące 15px, dopełnienie po prawej stronie wynoszące 30px, dopełnienie u dołu wynoszące 10px i dopełnienie po lewej stronie wynoszące 5px.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma nagłówkami. Twoim zadaniem jest użycie właściwości padding, aby dodać odstęp wokół treści tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw wartość padding na 20px ze wszystkich stron.
Napisz regułę CSS, która wybiera element <h2>. Ustaw górną i dolną wartość padding na 10px, a lewą i prawą wartość padding na 30px.

Spróbuj swoich sił

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>