Маржа не заполняется цветом фона, почему

Итак, у меня есть эта простая часть html-кода. Мой вопрос заключается в том, почему цвет фона не заполняет поле цветом, когда я применял его к элементу целого div и как я могу это исправить?

<!doctype html>
<html>

<head>
  <style>
    #footer {
      background: #263238;
      margin: 100px;
      padding: 0;
    }
    .footer-text {
      margin: 0;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="footer">
    <div class="footer-text">All Rights Reserved © 2016</div>
  </div>
</body>

</html>

Ответ 1

Вы должны использовать padding вместо margin, как описано в CSS Box Model.

Маржа предоставляет пространство за рамкой элемента и поэтому не будет окрашено - это просто пространство.
Заполнение с другой стороны обеспечивает пространство вокруг внутри поля элемента и окрашено и зависит от других стилей.

<!doctype html>
<html>      
  
  <head>
     <style>
        #footer {
           background: #263238;
           padding: 100px;
        }
        .footer-text {
           margin: 0;
           color: #fff;
        }
     </style>
  </head>
    
  <body>
     <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
     </div>
  </body>   
 
</html>

Ответ 2

Так работает модель css box. Этот фон применяется только к областям padding и content, поэтому вы не видите фон в поле. исправление просто измените margin на padding.

Ответ 3

Вы можете использовать padding.

Если вы можете использовать margin, тогда он оставляет пространство за пределами границы и padding он оставляет пространство внутри границы. Поэтому он отлично подходит для вас, используя padding.

 #footer{background: #263238; padding: 100px;}
 .footer-text{margin: 0;color: #fff;}

 <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
    </div>

Ответ 4

<!doctype html>
    <html>
        <head>
           <style>
              #footer{background: #263238;padding: 100px;}
              .footer-text{margin: 0;color: #fff;}
           </style>
        </head>
        <body>
            <div id="footer">
                <div class="footer-text">All Rights Reserved © 2016</div>
            </div>
        </body>
   </html>

Маржа применяется вне поля, в то время как прокладка применяется внутри поля.

Вот пример поля/дополнения.

http://www.goer.org/images/html/boxbasic.png

Ответ 5

Маржа не включается в коробную модель вашего div.

Вы добавляете дополнение вместо поля. Это даст вам единый цвет в нижнем колонтитуле. например:

#footer {
  background: #263238;
  margin:0;
  padding:100px;
}

Но если вы ищете другой цвет снаружи, вы можете получить это, используя border, как это:

#footer {
  background: #263238;
  margin:0;
  padding:0;
  border:100px solid green;
}

Теперь вы можете включить границу в свою коробку, чтобы она не испортила вашу структуру страницы. Сделайте это, определив box-sizing для нижнего колонтитула.

#footer {
  background: #263238;
  margin:0;
  padding:0;
  border:100px solid green;
  box-sizing:border-box;
}

Ответ 6

Попробуйте задать border: 1px solid transparent для родительского элемента тега p.