Ten artykuł pokazuje:
- Jak działają ujemne marginesy w CSS?
- Korzystanie z właściwości górnego marginesu ujemnego
- Korzystanie z właściwości dolnego marginesu ujemnego
- Korzystanie z właściwości prawego marginesu ujemnego
- Korzystanie z właściwości ujemnego lewego marginesu
- Dlaczego margines-góra: -5 != margines-dół: 5?
Jak działają ujemne marginesy w CSS?
Ujemny margines przesuwa zawartość poza stronę. Sposób użycia marginesu ujemnego jest taki sam jak marginesu dodatniego, z tą różnicą, że wraz z wartością używany jest znak „-”. Postępuj zgodnie z poniższymi wariantami ujemnego marginesu:
Istniejący plik HTML
„ książka.jpg ” to obraz przechowywany w lokalnym katalogu, jego ścieżka jest podawana jako „ źródło ' wartość. „ szerokość ' I ' wysokość ” obrazu są ustawione na 50%. Teraz utwórz „
<środek >
<źródło img = '../książka.jpg' wysokość = 'pięćdziesiąt%' ; szerokość = 'pięćdziesiąt%' >
= 'czarny kolor;' > Witamy w Linuxhint >
>
>
Po skompilowaniu powyższego kodu dane wyjściowe wyglądają następująco:
„ ” znajduje się na dole strony przed zastosowaniem ujemnego marginesu.
Korzystanie z właściwości górnego marginesu ujemnego
Dodać ' górny margines ” nieruchomość do “ ” i podaj jego wartość w ujemnej wartości. Na przykład tutaj -15% to wartość właściwości margines-góra:
<środek >
<źródło img = '../książka.jpg' wysokość = 'pięćdziesiąt%' ; szerokość = 'pięćdziesiąt%' >
= 'kolor: czarny; górny margines: -15%;' > Witamy w Linuxhint >
>
>
Po wykonaniu kodu strona wygląda tak:
Dane wyjściowe pokazują, że ujemny margines górny powoduje, że element „
” jest wyświetlany przed elementem nadrzędnym.
Korzystanie z właściwości dolnego marginesu ujemnego
Zastosuj te same właściwości, co powyżej i po prostu zmień „ margines-dolny ' nieruchomość. Następnie dodaj obraz na dole elementu „
< h3 styl = 'kolor: czarny; margines-dół: -5%;' > Witamy w Linuxhint h3 >
dz >
< img źródło = '../książka.jpg' wysokość = 'pięćdziesiąt%' ; szerokość = 'pięćdziesiąt%' >
Po aktualizacji kodu nasza strona wygląda tak:
Powyższe dane wyjściowe pokazują, że tekst otrzymuje dolny margines równy -5%.
Korzystanie z właściwości prawego marginesu ujemnego
Nadając elementowi
wartość -55% właściwości margin-right, przesuwa się on w przeciwnym kierunku:
< dz styl = „kolor-tła: dodgerblue;” >
< h3 styl = 'kolor: czarny; lewy margines: -55%; ' > Witamy w Linuxhint < / h3 >
< / dz >
< img źródło = '../książka.jpg' wysokość = 'pięćdziesiąt%' ; szerokość = 'pięćdziesiąt%' >
Po wykonaniu wyjścia kodu wyglądają tak:
Dane wyjściowe pokazują, że tekst otrzymuje ujemny margines prawy.
Korzystanie z właściwości ujemnego lewego marginesu
Właściwość margin-left mająca wartość ujemną działa w ten sam sposób. W poniższym kodzie element „
” przesuwa się o 50% w lewą stronę w kierunku przeciwnym do właściwości margin-left: =
„kolor-tła: dodgerblue;” > =
'kolor: czarny; lewy margines: -50%;' > Witamy w Linuxhint >>
<źródło img = '../książka.jpg' wysokość = 'pięćdziesiąt%' ; szerokość = 'pięćdziesiąt%' >
Dane wyjściowe powyższego kodu to:
Tak działa ujemny margines w CSS.
Dlaczego margines-góra:-5 != margines-dół:5?
Kiedy ' margines-dół:5% ” jest używany, dodaje margines od dolnej strony w kierunku środka elementu, ale gdy „ górny margines: -5% ” dodaje margines 5% od góry, ale w przeciwnym kierunku (na zewnątrz strony).
Wniosek
W CSS ujemny margines działa w przeciwnym kierunku, przypisując wartość marginesu. Przesuwa zawartość elementu w kierunku zewnętrznym/na zewnątrz strony. „Margines-top:-5″ nie jest równy „margin-bottom:5”, ponieważ obie wartości właściwości przesuwają zawartość w przeciwnych kierunkach odpowiadających pozycji nadrzędnej. W tym artykule z powodzeniem zademonstrowano, jak działa ujemny margines.