tag body widoczny nad containerem i pod stopką

pytanie zadane 5 lutego 2022 w HTML i CSS przez CYG4N Nowicjusz (240 p.)

Cześć. Dlaczego pomimo zmuszenia klasy container do bycia rozszerzoną na cały ekran za pomocą poniższego kodu CSS, wciąż widać tło (z klasy body) nad divem logo? Tak samo jest ze stopką - widać pod nią szare tło...

#container {
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    margin-top: 0;
    background-color: #4169e1;
    border-bottom: 5px solid #1d2f64;
    width: 100%;
}

#logotext {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 3px;
}

1	komentarz 5 lutego 2022 przez Comandeer Guru (607,060 p.) Pokaż całość, najlepiej w formie demo na codepen.io.

2 odpowiedzi

odpowiedź 5 lutego 2022 przez VBService Ekspert (256,600 p.)
wybrane 9 lutego 2022 przez CYG4N

Najlepsza

Zapoznaj się z zagadnieniem: Resetting browsers (default) CSS

Możesz np. ustawić margin wartość 0 dla wszystkich elementów html na stronie za pomocą * CSS universal selector (inne nazwy czasem spotykane, to: asterisk, star selector)

przykład (część kodu css z tego pytania)

<div id="container">
  <div id="logo">
    <div id="logotext">Poznaj Linuxa</div>
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Strona Główna</a></li>
      <li><a href="#">Dystrybucje</a></li>
      <li><a href="#">Instalacja</a></li>
      <li><a href="#">Polecenia</a></li>
      <li><a href="#">O Projekcie</a></li>
    </ul>
  </div>

  <div id="content">
    <p>Lorem</p>
    <p>Lorem</p>   
    <p>Lorem</p>
    <p>Lorem</p>    
  </div>

  <div id="footer">O projekcie słów kilka</div>
</div>

* {
    margin: 0;
   
    /* odkomentuj poniżej ;-) */
    /*
    box-sizing: border-box;
    border: 1px dotted yellow;
    */
}
body {
    background-color: rgb(34,34,34);
}
#container {
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}  

#logo {
    background-color: #4169e1;
    border-bottom: 5px solid #1d2f64;
    width: 100%;
}  
#logotext {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 3px;
}

#content {
    height: 100%;
}
#content p {
    color: limegreen;
    height: 200px;
}

#footer {
    font: 300 1em/1.2 arial;
    color: white;
    padding: 0.5em;
    background-color: rgb(51,51,51);
}

.menu {
    width: 100%;
    background-color: #333333;
    text-align: center;
    margin-top: 10px;
    border-bottom: 1px solid white;
} 
.menu a {
    font-size: 24px;
    color: white;
    text-decoration: none;
    transition: color 0.4s;
} 
.menu a:hover {
    color: gray;
} 
.menu ul li {
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}