CSS: Margin-bottom не отображается

Я просто знаю, что я, наверное, здесь немного глуп, и с видом на что-то действительно очевидное ... Но почему мой край (12px) не появляется между двумя div-элементами с идентификаторами row1 и row2, соответственно? Оба они принадлежат классу articles_row, для которого я установил margin-bottom: 12px;. Таким образом, margin-bottom элемента row1 должен быть хорошо виден между row1 и row2 ... прав? Внешние таблицы стилей не используются, как показано ниже. Это он:CSS: Margin-bottom не отображается

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 
     <style> 
      .articles_row { 
       margin-bottom: 12px; 
       color: green; 
      } 
      .article_left { 
       float: left; 
       width: 48%; 
       border: solid 2px #D74447; 
      } 
      .article_right { 
       float: right; 
       width: 48%; 
       border: solid 2px #D74447; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="articles_row" id="row1"> 
      <div class="article_left"> <p>This is left. </p> </div> 
      <div class="article_right"> <p>This is right.</p> </div> 
     </div> 
     <div class="articles_row" id="row2">   
      <div class="article_left"> <p>This is left. </p> </div> 
      <div class="article_right"> <p>This is right.</p> </div> 
     </div> 
    </body> 
</html>

источник

2015-07-24 Holland

Все, что здесь кажется, выглядит [взглянуть на один] (https://jsfiddle.net/ykwurd71/), какой браузер вы используете? –

не уверен, что вы после - что-то вроде этого? http://jsfiddle.net/4ngbohzq/1/ –

попробовать это ...

.articles_row { 
     margin-bottom: 12px; 
     color: green; 
     overflow: hidden; 
    }

Это работает, потому что поплавки на ребенка дивы вызывают их «выскочить» из родительского дел. Откройте страницу в своем браузере и используйте инструмент осмотра, чтобы узнать, что происходит. У div .articles_row на самом деле были нижние поля, но сами divs были как высотой, так и обоими в верхней части страницы, перекрывая друг друга, в то время как дочерние divs отображались так, как если бы родительские divs вообще отсутствовали ,

Поплавки могут вводить в заблуждение в CSS, но вы попадете туда! :)

источник

2015-07-24 05:47:04

Спасибо, что сделал! – Holland

Не забудьте принять ответ, чтобы другие могли легко видеть, что он работал –

Но как я могу принять ответ? И задать еще одну вещь: я полагаю, что необходимость добавления «переполнения: скрытая» имеет какое-то отношение к использованию плавающих элементов? – Holland

CSS: Margin-bottom не отображается

ответ

Смежные вопросы