Wyjaśniona nieruchomość marginesa w CSS

Margines to przestrzenie, które są tworzone (dla lepszej estetyki) wokół dowolnego elementu. Margines jest automatycznie ustawiany przez używaną przeglądarkę. Jednak marginesy zdefiniowane przez użytkownika można utworzyć za pomocą właściwości CSS Margin. Marginesy mają cztery strony (zwykle zależy to od elementu), a margines każdej strony można ustawić za pomocą właściwości marginesu.

Marginesa pozwala indywidualnie ustawić marginesy na bokach lub można tworzyć marginesy dla wielu stron jednocześnie. W tym opisowym przewodniku właściwość marginesu w CSS jest wyjaśniona i ma następujące wyniki uczenia się.

• Działanie nieruchomości marginesowej w CSS
• Działanie na marginesie nieruchomości
• Wykorzystanie właściwości marginesu z przykładami

Jak działa nieruchomość marginesa w CSS

Własność marginesu w CSS może działać w różnych okolicznościach, w których musisz podawać boki (indywidualnie) lub podawać marginesy za pomocą właściwości skrótów (wiele stron jednocześnie). Praca w obu sytuacjach jest omawiana tutaj.

Margines można podać poszczególnym stronom za pomocą odpowiednio składni.

selektor margin-top: wartość; // w górnej stronie
selektor margin-bottom: wartość; // po dolnej stronie
selektor margin-left: wartość; // po lewej stronie
selektor margin-right: wartość; // po prawej stronie

Selektor może być dowolnym elementem, podczas gdy wartością jest liczba używana do nadania określonego limitu marginesu. Wartość może być używana z kilkoma jednostkami pomiarowymi i.mi., Auto, długość (PX, CM, PT), procent (%) i dziedzictwo (zgodnie z klasą nadrzędną). PX jest pomiarem bezwzględnym, podczas gdy EM, REM i procent są miarami względnymi i są lepsze (w porównaniu z PX) odpowiednie dla wyników responsywnych.

Oprócz marginesów tej indywidualnej strony, marginesy stenograficzne można również użyć do przekazywania marginesów wielu stron jednocześnie. Składnia właściwości stenograficznej marginesu znajduje się poniżej:

selektor margines: wartość1 wartość 2 wartość;

Wartość1, wartość2, wartość3 i wartość4 reprezentują górne, prawe, dolne i lewe boki elementu.

Jak używać właściwości marginesu w CSS

Ta sekcja zawiera kilka przykładów, które pokazują użycie nieruchomości marginesowej w CSS.

Przykład 1: Podawanie marginesów poszczególnym stronom
W tym przykładzie kod napisany poniżej służy do przekazywania marginesów poszczególnym stronom.

Własność marginesu w CSS

Używając prawa marginesu 5px
Używając dna marginesu 5px
Za pomocą marginesu górnego 5px
Używając marginesu po lewej 5px

Opis kodu jest podany poniżej

• Styl CSS dla DIV jest zdefiniowany przez nadanie szerokości, własności pływakowej i granicy
• Cztery klasy CSS są tworzone o nazwie „Top”, „Rig”, „Bot” i „LEF”, które zawierają margines (5px) w każdej klasie
• Te cztery klasy są używane w działach (Div's)

Obraz kodu pokazano poniżej

Wyjście:

Przykład 2: Podawanie marginesów wielu stron jednocześnie
Powyższy przykład dostarczył marginesów poszczególnym stronom. Poniższy kod daje jednocześnie margines wielu stronom

Własność marginesu w CSS

Wykorzystanie marginesu 5% ze wszystkich stron
Używanie 5% marginesu na górze/na dole i 10% po lewej/prawej stronie
Używając marginesu 2 i 3EM do górnej i dolnej oraz 4EM do prawej/lewej
używając marginesu 2,4,6,8 pikseli na górze, prawym, dolnym, lewym odpowiednio

Powyższy kod jest opisany jako

• Cztery klasy CSS są tworzone o nazwie „Sing”, „Wątp”, „Trip” i „All”
• Klasa „sin” daje margines% wszystkim stronom, a klasa „wątpliwości” daje marżę 5% na górę/na dole i 10% do prawej/lewej
• Klasa „podróży” daje margines 2EM i 4EM na szczyt dolnego i 3em do prawej/lewej strony
• Klasa „All” daje margines 2, 4, 6 i 8px do górnej, prawej, dolnej i lewej strony

Obraz kodu pokazano poniżej

Wyjście:

Z powyższych przykładów nauczyłbyś się zastosowania właściwości marginesu w następujących kontekstach:

• Stosowanie marginesu na wszystkie strony indywidualnie
• Dawanie marginesów za pomocą marginesu nieruchomości

Wniosek

Właściwość marginesu w CSS jest praktykowana podaje marże zgodnie z właściwościami zdefiniowanymi przez użytkownika. W tym artykule pokazuje działanie i wykorzystanie nieruchomości marginesowej w CSS. Właściwość marginesu w CSS może być używana do podania marginesów każdej stronie indywidualnie, a właściwość stenografii marginesowej może być użyta do podawania marginesów wielu stron jednocześnie.