Wewnętrzne marginesy CSS

Wewnętrzny margines tego elementu wynosi 70px.

Wewnętrzne marginesy CSS

CSS padding Atrybuty są używane do generowania przestrzeni wokół zawartości elementu w dowolnym zdefiniowanym granicy.

Przez CSS można w pełni kontrolować wewnętrzne marginesy (wypełnienie). Istnieją właściwości do ustawienia wewnętrznych marginesów dla każdej strony (górnej, prawej, dolnej i lewej) elementu.

Padding - osobne boki

CSS ma atrybuty do określania wewnętrznych marginesów dla każdej strony elementu:

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

Wszystkie atrybuty wewnętrznych marginesów mogą być ustawione na następujące wartości:

  • length - określa wewnętrzny margines w jednostkach takich jak px, pt, cm itp.
  • % - określa wewnętrzny margines jako procent szerokości zawartości
  • inherit - określa, że wewnętrzny margines powinien być dziedziczony od elementu nadrzędnego

Wskazówka:Nie dozwolone są ujemne wartości.

Przykład

Ustaw różne wewnętrzne marginesy dla czterech boków elementu <div>:

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

Spróbuj sam

Padding - skrócona właściwość

Aby skrócić kod, można指定所有内边距属性在一个属性中。

padding 属性是以下各内边距属性的简写属性：

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

工作原理是这样的：

Jeśli padding 属性有四个值：

  • Lewy margines wewnętrzny to 100px, prawy margines wewnętrzny to 50px
    • padding: 25px 50px 75px 100px;
    • Właściwość jest skróconą formą następujących właściwości wewnętrznych marginesów:
    • Właściwość ustawia trzy wartości:
    • Praca właściwości wygląda tak:

Przykład

Właściwość ma cztery wartości:

div {
  Lewy margines wewnętrzny to 100px, prawy margines wewnętrzny to 50px
}

Spróbuj sam

Jeśli padding Użyj skróconej właściwości padding z ustawionymi czterema wartościami:

  • Użyj skróconej właściwości padding z ustawionymi trzema wartościami:
    • padding: 25px 50px 75px 100px;
    • Prawy i lewy margines wewnętrzny to 50px, górny i dolny margines wewnętrzny to 25px
    • Właściwość ustawia trzy wartości:

Przykład

Dolny margines wewnętrzny to 75px, górny margines wewnętrzny to 25px

div {
  Użyj skróconej właściwości padding z ustawionymi trzema wartościami:
}

Spróbuj sam

Jeśli padding padding: 25px 50px 75px;

  • padding: 25px 50px;
    • Właściwość ustawia dwie wartości:
    • Prawy i lewy margines wewnętrzny to 50px, górny i dolny margines wewnętrzny to 25px

Przykład

Użyj skróconej właściwości padding z ustawionymi dwoma wartościami:

div {
  padding: 25px 50px;
}

Spróbuj sam

Jeśli padding Właściwość ustawia jedną wartość:

  • padding: 25px;
    • Wszystkie cztery marginesy wewnętrzne są 25px

Przykład

Użyj skróconej właściwości padding z ustawioną wartością:

div {
  padding: 25px;
}

Spróbuj sam

Marginesy wewnętrzne i szerokość elementu

CSS width Właściwość określa szerokość obszaru zawartości elementu. Obszar zawartości to część elementu (model box) wewnętrzna marginesy, obramowanie i marginesy.

Dlatego, jeśli element ma określoną szerokość, dodanie marginesów wewnętrznych do tego elementu dodaje się do ogólnej szerokości elementu. To jest zazwyczaj niepożądany wynik.

Przykład

W tym przypadku szerokość elementu <div> wynosi 300px. Jednak rzeczywista szerokość elementu <div> będzie wynosić 350px (300px + lewy margines wewnętrzny 25px + prawy margines wewnętrzny 25px):

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

Spróbuj sam

Jeśli chcesz utrzymać szerokość na 300px, niezależnie od wypełnienia, możesz użyć: box-sizing Właściwość ta spowoduje, że element utrzyma swoją szerokość. Jeśli zwiększysz marginesy wewnętrzne, przestrzeń dostępna na zawartość zostanie zmniejszona.

Przykład

Użyj właściwości box-sizing, aby utrzymać szerokość na 300px, niezależnie od wypełnienia:

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

Spróbuj sam

Więcej przykładów

Ustaw lewy wewnętrzny margines
Ten przykład pokazuje, jak ustawić lewy wewnętrzny margines elementu <p>.
Ustaw prawy wewnętrzny margines
Ten przykład pokazuje, jak ustawić prawy wewnętrzny margines elementu <p>.
Ustaw górny wewnętrzny margines
Ten przykład pokazuje, jak ustawić górny wewnętrzny margines elementu <p>.
Ustaw dolny wewnętrzny margines
Ten przykład pokazuje, jak ustawić dolny wewnętrzny margines elementu <p>.

Wszystkie właściwości wewnętrznych marginesów CSS

Właściwość Opis
padding Skrócona właściwość do ustawienia wszystkich właściwości wewnętrznych marginesów w jednym wyrażeniu.
padding-bottom Ustaw dolną wewnętrzną margines elementu.
padding-left Ustaw lewą wewnętrzną margines elementu.
padding-right Ustaw wewnętrzny margines prawy elementu.
padding-top Ustaw wewnętrzny margines elementu.

Rozszerzona lektura

Dodatkowa lektura:Model ramki: CSS wewnętrzny margines