Kiedy i dlaczego margines auto nie działa w CSS
W tym poście wyjaśnimy, kiedy i dlaczego Margin Auto nie działa w CSS.
Czym jest właściwość marginesu?
CSS „margines„Własność służy do tworzenia pustej przestrzeni wokół elementu, który może być od lewej, prawej, górnej i dolnej. Zdefiniowana przestrzeń zawsze odbywa się poza wybranym elementem HTML.
Składnia
Margines: długość | automatyczny;Wartość "długość”Odnosi się do marginesu elementów, które można określić w REM, PT, PX i w innych jednostkach. Wartość "automatyczny”Umożliwia przeglądarce dostosowanie marginesu.
Aby głęboko przeglądać właściwość marginesu, możesz sprawdzić ten dedykowany artykuł.
Kiedy i dlaczego margines auto nie działa w CSS?
Każdy element HTML ma domyślnie typ wyświetlania, jeden to „blok”, A drugi to„Wline". W HTML niektóre są elementami na poziomie blokowym, a niektóre są domyślnie elementy wbudowane. Elementy na poziomie blokowym mają predefiniowane 100% szerokość, podczas gdy elementy inline nie mają predefiniowanej szerokości ani wyściółki.
Element typu blokowy HTML
Tutaj, w naszym pliku HTML, dwa „ <> Blok
Blok
Wartość wyświetlania jako blok będzie domyślnie zastosowana do
Element i zużyje 100% szerokości, jak pokazano poniżej:
Teraz dodajmy „margines„Nieruchomość z„automatyczny„Wartość do naszego elementu typu bloków
wzdłuż "szerokość" z "50px”:
Pszerokość: 50px;
Margines: Auto;
Po zapisaniu wspomnianego kodu zauważ, że predefiniowana szerokość została zastąpiona za pomocą 50px, a Auto marginesu dostosowało element do centrum:
Idźmy naprzód w kierunku elementów HTML typu Inline.
Element html typu inline
Jak pokazuje poniższy obraz, że kiedy zadeklarowaliśmy tekst w tagach, nie pochłonęli żadnej przestrzeni; Tylko dlatego, że wartość wyświetlania inline została domyślnie zastosowana do tego elementu:
Teraz, jeśli zastosujemy właściwość szerokości lub właściwości marginesu z automatyczną wartością na elemencie rozpiętości. W rezultacie nie nastąpi żadne efekty. Ponieważ po zastosowaniu wyświetlania wbudowanego wyświetlacza sprawia, że element zobowiązuje się do spożywania tylko przestrzeni, która istnieje w jego znacznikach.
Bonusowa wskazówka
Jeśli właściwość wyświetlania elementu jest domyślnie ustawiona na inline, możesz ją zastąpić, określając blok wartości właściwości wyświetlania samodzielnie.
Spójrz poniżej na wyjaśniony przykład.
Przykład
Użyjmy celowo elementu o predefiniowanej wartości wbudowanej, na przykład:
> Wline
W następnym kroku użyj właściwości wyświetlacza wzdłuż wartości „blok". Ustaw szerokość na 50px i margines na automatycznie, jak wyjaśniono:
ZakresBlok wyświetlacza;
szerokość: 50px;
Margines: Auto;
Wyjście
Opracowaliśmy, kiedy i dlaczego margines auto nie działa w CSS.
Wniosek
Auto marginesu nie działa z elementami, które mają domyślnie wyświetlacz inline, taki jak Span. Tylko elementy z predefiniowanym blokiem wyświetlania działają z automatycznym marginesem. Możesz jednak zastąpić zachowanie wbudowane elementu i sprawić, by zachowuje się jak element typu bloków. W tym artykule omówiono, dlaczego i kiedy margines auto nie działa w ramach CSS.