Model ramki: Wewnętrzny margines CSS

Wewnętrzny margines elementu znajduje się między ramką a obszarem zawartości. Najprostszym atrybutem do kontrolowania tego obszaru jest atrybut padding.

Atrybut padding CSS definiuje pustą przestrzeń między krawędzią ramki elementu a jego zawartością.

Atrybut padding CSS

Atrybut padding CSS definiuje wewnętrzny margines elementu. Atrybut padding akceptuje wartości długości lub wartości procentowe, ale nie pozwala na użycie ujemnych wartości.

Na przykład, jeśli chcesz, aby wszystkie elementy h1 miały wewnętrzny margines 10 pikseli na każdej stronie, musisz zrobić to tak:

h1 {padding: 10px;}

Możesz również ustawić wewnętrzny margines dla każdej strony w kolejności góra, prawo, dół, lewo, każda strona może używać różnych jednostek lub wartości procentowych:

h1 {padding: 10px 0.25em 2ex 20%;}

Atrybuty pojedynczego wewnętrznego marginesu

Również można ustawić górny, prawy, dolny i lewy wewnętrzny margines, używając poniższych czterech单独owych atrybutów:

Możesz się domyślić, że poniższa reguła ma taki sam efekt jak skrócona reguła powyżej:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Wartości procentowe wewnętrznego marginesu

Jak już wspomniano, można ustawić wartości procentowe dla wewnętrznego marginesu elementu. Wartości procentowe są obliczane względem szerokości elementu nadrzędnego, co jest podobne do zewnętrznego marginesu. Dlatego, jeśli szerokość elementu nadrzędnego się zmienia, one również się zmieniają.

Poniższa reguła ustawia wewnętrzny margines akapitu na 10% szerokości elementu nadrzędnego:

p {padding: 10%;}

Na przykład: jeśli rodzic akapitu to element div, jego wewnętrzny margines musi być obliczony na podstawie szerokości div.

<div style="width: 200px;">
<p>W tym akapicie znajduje się DIV o szerokości 200 pikseli.</p>
</div>

Uwaga:Górne i dolne wewnętrzne marginesy są takie same jak boczne wewnętrzne marginesy; wewnętrzne marginesy w procentach są ustawiane względem szerokości elementu nadrzędnego, a nie względem wysokości.

Przykład CSS wewnętrznego marginesu:

Wszystkie atrybuty wewnętrznego marginesu w jednym deklaracie
Ten przykład pokazuje, jak używać skróconych atrybutów, aby ustawić wszystkie atrybuty wewnętrznego marginesu w jednym deklaracie, co może mieć od jednego do czterech wartości.
Ustawienie dolnego wewnętrznego marginesu na 1
Ten przykład pokazuje, jak używać wartości centymetrów do ustawienia dolnego wewnętrznego marginesu komórki.
Ustawienie dolnego wewnętrznego marginesu na 2
Ten przykład pokazuje, jak używać wartości procentowych do ustawienia dolnego wewnętrznego marginesu komórki.
Ustawienie lewego wewnętrznego marginesu na 1
Ten przykład pokazuje, jak używać wartości centymetrów do ustawienia lewego wewnętrznego marginesu komórki.
Ustawienie lewego wewnętrznego marginesu na 2
Ten przykład pokazuje, jak używać wartości procentowych do ustawienia lewego wewnętrznego marginesu komórki.
Ustawienie prawego wewnętrznego marginesu 1
Ten przykład pokazuje, jak ustawić prawy wewnętrzny margines komórki za pomocą wartości centymetrów.
Ustawienie prawego wewnętrznego marginesu 2
Ten przykład pokazuje, jak ustawić prawy wewnętrzny margines komórki za pomocą wartości procentowych.
Ustawienie górnego wewnętrznego marginesu 1
Ten przykład pokazuje, jak ustawić górny wewnętrzny margines komórki za pomocą wartości centymetrów.
Ustawienie górnego wewnętrznego marginesu 2
Ten przykład pokazuje, jak ustawić górny wewnętrzny margines komórki za pomocą wartości procentowych.

Atrybut wewnętrznych marginesów CSS

Atrybut Opis
padding Atrybut skrócony. Działa na ustawienie wszystkich wewnętrznych marginesów elementu w jednym deklaracie.
padding-bottom Ustawia dolny wewnętrzny margines elementu.
padding-left Ustawia lewy wewnętrzny margines elementu.
padding-right Ustawia prawy wewnętrzny margines elementu.
padding-top Ustawia górny wewnętrzny margines elementu.