Problem z header, ustawenie padding.

0

Cześć! Dzisiaj powróciłem sobie do nauki programowania. Piszę stronę, konkretnie menu ale padding headera nie dotyka lewego i prawego rogu. Nie wiem jak zrobić aby dotykał. Problem może wydawać się banalny ale nie nie mogłem znaleźć pomocy. Jestem w tym nowy. Wiecie co z tym zrobić? Z góry dzięki.

CSS

header {
    background-color: #444;
    padding: 12px;
  }

HTML

<body>  
    <header>   
    <div>
        <ul class="menu">
       <li>
            <a href="kontakt.html">Link 1</a>
       </li>
       <li>
            <a href="">Link 2</a>
       </li>
       <li>
            <a href="">Link 3</a>
       </li>
       </ul>
    </div>
    </header>
</body>

screenshot-20220112235015.png

1

Zrzut ekranu z 2022-01-13 00-02-38.png

Odpal sobie devtoolsy w przeglądarce (F12), przejdź do zakładki Elements i poniżej wybierz okienko Computed w którym będziesz miał zaznaczone właściwości margin/padding .

W taki sposób będziesz mógł sprawdzić z jakiego elementu pochodzi ten odstęp.

0

Wiem z jakiego elementu pochodzi, ale nie wiem jak napisać kod aby dotkał górnej krawędzi. Powiększając padding, odstęp zmniejsza się w dół. Ja natomiast chciałbym aby w górę i w boki.

1

https://developer.mozilla.org/pl/docs/Web/CSS/Margin
https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Ze zdjęcia wygląda to tak, jakby padding nachodził z elementu wyżej, czyli z body, bo pomimo ciemnego backgroundu widać biały kolor.

body {
  padding: 0;
  margin: 0;
}

Ewentualnie jakby to nie zadziałało to możesz jeszcze potestować margin-left, padding-left, margin-right, padding-right itd na tym elemencie, który ma to ustawione

 header {
  margin-left: 0;
  padding-right: 0; 
}
2
Dzemi napisał(a):

Cześć! Dzisiaj powróciłem sobie do nauki programowania. Piszę stronę, konkretnie menu ale padding headera nie dotyka lewego i prawego rogu.

To czemu nie programujesz, tylko piszesz HTML/CSS? D

0

Dzięki @Xarviel za pomoc.

Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1