Użyj CSS, aby wyzerować swoje marginesy i granice

W tym artykule wyjaśniono, jak używać CSS wyzerować marże i obramowania, aby Twoje strony internetowe były wyświetlane spójnie w każdej przeglądarce.

Normalizowanie wartości marginesów i dopełnienia

Najlepszym sposobem rozwiązania problemu niespójnego modelu pudełkowego jest ustawienie wszystkich marginesów i wartości dopełnienia elementów HTML na zero. Możesz to zrobić na kilka sposobów: dodać tę regułę CSS do arkusza stylów:

Nawet jeśli ta reguła jest niespecyficzna, ponieważ znajduje się w twoim zewnętrznym arkuszu stylów, będzie miała większą szczegółowość niż domyślne wartości przeglądarki. Ponieważ te wartości domyślne są tym, co nadpisujesz, ten jeden styl spełni to, co zamierzasz zrobić.

Po wyłączeniu wszystkich marginesów i dopełnienia, będziesz musiał ponownie włączyć je selektywnie dla określonych części strony internetowej, aby uzyskać wygląd i styl, którego wymaga Twój projekt.

Użyj CSS do normalizacji granic

Starsze wersje Internet Explorer miał przezroczystą lub niewidoczną ramkę wokół elementów. O ile nie ustawisz obramowania na 0, ta granica może zepsuć układy stron. Jeśli zdecydowałeś, że będziesz nadal wspierać te przestarzałe wersje IE, musisz rozwiązać ten problem, dodając następujące elementy do swoich stylów ciała i HTML:

HTML, treść {
margines: 0px;
dopełnienie: 0px;
 obramowanie: 0px;
}

Podobnie jak w przypadku wyłączenia marginesów i dopełnienia, ten nowy styl wyłączy również domyślne obramowania. Możesz również zrobić to samo, używając selektora wieloznacznego pokazanego wcześniej w artykule.

Dlaczego spójne marginesy i granice mają znaczenie w projektowaniu stron internetowych

Dzisiejsza przeglądarka internetowa przeszła długą drogę od szalonych czasów, w których jakakolwiek spójność między przeglądarkami była myśleniem życzeniowym. Dzisiejsze przeglądarki internetowe są w pełni zgodne ze standardami. Dobrze ze sobą współgrają i zapewniają dość spójne wyświetlanie strony w różnych przeglądarkach. Obejmuje to najnowsze wersje Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari oraz różne przeglądarki znajdujące się naniezliczone urządzenia mobilne dostęp do stron internetowych dzisiaj.

Chociaż z pewnością poczyniono postępy w sposobie wyświetlania CSS przez przeglądarki, nadal istnieją niespójności między tymi różnymi opcjami oprogramowania. Jedną z typowych niespójności jest sposób, w jaki te przeglądarki domyślnie obliczają marginesy, dopełnienie i obramowanie.

Ponieważ te aspekty modelu pudełkowego wpływają na wszystkie elementy HTML i są niezbędne przy tworzeniu strony układy, niespójne wyświetlanie oznacza, że ​​strona może wyglądać świetnie w jednej przeglądarce, ale wygląda nieco niewłaściwie w inne. Aby rozwiązać ten problem, wielu projektantów stron internetowych normalizuje te aspekty modelu pudełkowego. Ta praktyka jest również znana jako wyzerowanie wartości marż, wyściółkai granice.

Uwaga na temat domyślnych ustawień przeglądarki

Każda z przeglądarek internetowych ustawia domyślne ustawienia niektórych aspektów wyświetlania strony. Na przykład hiperłącza są domyślnie niebieskie i podkreślone. To zachowanie jest spójne w różnych przeglądarkach i chociaż większość projektantów zmienia je, aby dopasować je do projektu potrzeby konkretnego projektu, fakt, że wszystkie zaczynają się od tych samych wartości domyślnych, ułatwia ich wykonanie zmiany. Niestety, domyślna wartość marginesów, dopełnienia i obramowań nie jest tak samo spójna w różnych przeglądarkach.