Jak prawidłowo ustawiać obiekty pod sobą w HTML i CSS

Dla specjalistów Webmastering
#1

Witam

Chciałbym się dopytać jak prawidłowo ustawić np. nagłówek pod logo w sekcji header

Czy mam używać pagination czy może margin?
logo i h1 przypisałem już display-inblock tylko nie wiem czy tak ma być bo chciałbym aby logo było centralnie na środku strony a centralnie pod logiem nagłowek h1.

Dziwne też że jak używam margin-left 50% to wizualnie obiekty nie są centralnie na środku strony tylko widać że trochę w bok.

#2

Generalnie margin i padding dadzą ten sam efekt, bez względu kiedy który zastosujesz, ale lepiej robić to logicznie. Gdy chcesz oddalić od siebie dwa elementy które są na tym samym poziomie drzewa DOM, przykład:

<ul>
  <li>Jakis tekst</li>
  <li>Jakis tekst</li>
  <li>Jakis tekst</li>
</ul>

Gdy chcesz zrobić przerwy pomiędzy elementami li zazwyczaj lepiej zrobić to przez margin. Gdy chcesz by wszystkie elementy potomne względem jakiegoś kontenera nie zaczynały się od jego brzegów tylko były lekko wcięte to lepiej stosować padding np dla przykładu wyżej na elemencie ul niż margin left na każdym potomku.

Ma to też znaczenie jeśli dojdzie do tego obramowanie i tło elementów, w tedy musisz robić to świadomie - musisz wiedzieć czym jest box model i jak on działa (https://www.w3schools.com/css/css_boxmodel.asp) ponieważ nie zawsze intuicyjnie margin padding czy border wpływają na rozmiar całego elementu.

Musisz dać przykład np na jakimś jsfiddle bo zupełnie nie rozumiem o co pytasz.

Jest to dziwne bo nie wiesz czym jest i jak działa box model (pierwsza część mojego postu), z lewej strony kontenera ustawiasz 50% marginesu czyli jego lewa krawędź powinna się znaleźć na środku, a nie jego środek.

1 polubienie