Jak zapamiętać w CSS, że margines jest poza obramowaniem ,a wypełnienie wewnątrz [zamknięte]

Używasz pudełka. Jeśli wkładasz coś do pudełka, wkładasz trochę wyściółki, aby upewnić się, że nie uderzy o boki. Margines byłby wtedy drugą rzeczą.

Pin-P jest w

Wydrukuj schemat z sekcji Wymiary pudełka specyfikacji i umieść go na ścianie.

Dla mnie "padding" brzmi bardziej wewnętrznie niż "margines". Może myślenie o wydrukowanej stronie pomoże? Marginesy są obszarami na zewnątrz-generalnie nie można nawet drukować do krawędzi - są one nie do odróżnienia. W ramach tych marginesów treść może być wyściełana, aby zapewnić dodatkową barierę między treścią a marginesem?

Gdy będziesz pracował w CSS wystarczająco, zapamiętanie tego stanie się drugą naturą.

Wyściółka jest zwykle używana wewnątrz. Albo na ścianie, albo na skrzynce pocztowej, to proste. A jeśli wyściółka jest wewnątrz, to margines jest na zewnątrz. To nie powinno być trudne.

Nauczyłem się tego z czasem - model pudełkowy jest dość prosty, ale głównym powodem, dla którego ludzie uważają go za trudny, jest to, że body nie łamie w sposób widoczny modelu.

Naprawdę, jeśli podasz body margines i tło, powinieneś zobaczyć je otoczone białym paskiem. Jednak tak nie jest - padding body jest taki sam jak margines. Wskazuje to na kilka błędnych rzeczy dotyczących modelu pudełkowego.

Zazwyczaj myślę o tym tak:

• margin = Odstęp wokół pudełka;
• border = the edge of the box;
• padding = spacja wewnątrz pudełka.

Tim Saunders dał kilka doskonałych porad - kiedy zaczynałem z CSS, zrobiłem punkt budowania dobrego, w pełni skomentowanego arkusza stylów bazowych. Arkusz stylów zmieniał się wiele razy i pozostaje wspaniałym zasobem.

Jednak, gdy natknąłem się na własne problemy z modelem pudełkowym, zacząłem używać 'Mo Pi'. Jak w " nie jestem wystarczająco gruby, muszę jeść mo pi."Dziwne, ale u mnie zadziałało. Oczywiście przytyłem 20 funtów podczas nauki CSS...;-)

Użyj firebug, aby pomóc ci zobaczyć.

Stwórz własny, komentowany arkusz stylów bazowych, który możesz wykorzystać jako szablon, gdy chcesz utworzyć nową stronę lub edytować istniejącą stronę.

Możesz dodawać je w miarę zdobywania wiedzy i stosować je w różnych przeglądarkach, aby zobaczyć, jak zachowują się różne rzeczy.

Będziesz także mógł dodawać w komentarzach lub przykładach inne trudne do zapamiętania rzeczy lub rzeczy, które są sprzeczne z intuicją.

Dodaj obramowanie, nawet tylko tymczasowo. Grając z liczbami, zobaczysz różnicę.

W rzeczywistości tymczasowe granice wokół elementów są pomocnym sposobem pracy, dzięki czemu można zobaczyć, dlaczego pływaki opadają itp.

Wiem, że to odpowiedź na twoje pytanie, ale raczej wskazówka. Ilekroć mam do czynienia z marginesem i wyściółką, dodam obramowanie wokół części, z którą pracujesz, a stamtąd pokazuje mi pokój, z którym muszę pracować. Kiedy jestem gotowy, usuwam granicę.

PAdding jest częścią malowania elementu: rozszerza ono tło elementu . Sensowne jest myślenie o elemencie para + padding jako o wspólnym tle. Padding jest analogiczny do płótna obrazu: im większa wyściółka, tym większe płótno, a tym samym tło. Obramowanie (ramka obrazu) przebiegałoby wokół tej pary. I margines {[2] } oddziela obrazy na ścianie galerii. Myślenie o pojęciu tła obiektu pomaga skleić parę object+padding razem. Zwykłe wyjaśnienia tego, co jest wewnątrz vs Na Zewnątrz, nie pozostają w pamięci: po chwili wszyscy wracają do pierwotnego zamieszania. Pamiętaj również, że marginesy są składane pionowo, a wyściółka nie.

Zamiast pytać raz po raz do google wystarczy użyć okna Inspektora. Na tej karcie styl i przewiń w dół do dołu możesz zobaczyć tak.

Margin: gdy chcesz przesunąć blok. Padding: gdy chcesz przenieść elementy w obrębie bloku.