Почему margin не накладываются друг на друга и как это исправить?

#html #css

Между section, aside и nav не накладываются margin, как это исправить?
А так же, как сделать что бы footer при перемещении в .container не наезжал section
и aside?
https://jsfiddle.net/8jaxx1x9/1/

    

    

    

        
item1
        
item2
        
item3
        
item4
        
item5
        
item6
    
    
    

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis enim
debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam quaerat
quisquam aliquid explicabo beatae quidem ipsam quia?
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis.
Excepturi voluptates eum mollitia repellendus.
    
    

        
Lorem ipsum dolor sit amet.
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!
    

Ленива Компани!


Не имею понятия как сюда поместить CSS, за помощь благодарен.
    

Ответы

Ответ 1

Вертикальный(боковой) margin никогда не накладывается(не схлопывается), поэтому никак
не исправить.

Чтобы футер не наезжал на section и aside при помещении футера в элемент container,
необходимо перед футером поместить элемент с свойством clear: both, либо к самому футеру
применить это свойство.

Что вам надо почитать, чтобы не возникало таких вопросов:


Статьи о свойстве float и о его воздействии на поведение элементов
Статьи о свойстве clear
Статьи о схлопывании марджинов
Статьи о хаке clearfix




body {
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 6px;
}
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.container {
  background: #eaeaed;
  margin-bottom: 24px;
  *zoom: 1;
}
section {
	float: left;
	width: 63.197026%;
}
aside {
	float: right;
	width: 29.3680297%;
}
.container,
nav, section,
aside, footer {
  border-radius: 6px;
}
section,
aside, footer {
  background: #2db34a;
  color: #fff;
  margin: 1.858736059%;
  padding: 20px 0;
  text-align: center;
}
section {
  float: left;
  width: 63.197026%;
}
aside {
  float: right;
  width: 29.3680297%;
}
nav {
  background-color: #2db34a;
  margin: 1.858736059%;
  text-align: center;
}
nav ul {
  margin: 0px;
  padding: 5px 0px 5px 0px;
}
nav ul li {
  display: inline;
  padding: 5px 10px 5px 10px;
  border-radius: 6px;
}
nav ul li a:link, nav ul li a:visited {
  color: white;
  border-bottom: none;
  font-weight: bold;
  text-decoration: none;
}
nav ul li.selected {
  background-color: lightgreen;
  font-weight: bold;
  color: white;
}
@media all and (max-width: 420px) {
  section, aside, footer {
    float: none;
    width: auto;
  }
}
    

    	

    	

    		
item1
    		
item2
    		
item3
    		
item4
    		
item5
    		
item6
    	
    	
    	

    	
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis
enim debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam
quaerat quisquam aliquid explicabo beatae quidem ipsam quia?
    	
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis.
Excepturi voluptates eum mollitia repellendus.
    	
Itaque aut in eius repellendus, eaque, quaerat voluptates vero, ipsam recusandae,
et unde. Aut, ut?
    	
Eaque maxime eos, doloribus voluptatibus harum placeat, pariatur amet, perspiciatis
officia hic corrupti, numquam repudiandae.
    	
Consequuntur aperiam ullam dolores labore veritatis tempore magnam ducimus
qui, voluptatum aliquam, dolorem, vel expedita!
    	
Quidem, ipsa aperiam sequi qui. Optio aliquid, sed nisi inventore illo totam
quisquam vero sit.
    	
Tenetur reprehenderit minus facilis veritatis debitis quos totam incidunt,
excepturi dolores error obcaecati, rerum molestias.
    	
Ab nam ex hic numquam expedita, sint amet voluptate et, modi impedit aut?
Incidunt, placeat.
    	
Libero nemo ab saepe iure sed tempora adipisci! Mollitia, ratione delectus.
Inventore eos nesciunt consequuntur!
    	
Quos, tempore. Error saepe ullam distinctio modi perspiciatis? Incidunt voluptatum,
esse dolorum veniam provident similique!
    	
Fuga, labore, laboriosam aut laudantium officiis hic vitae, cum consectetur
dolore, recusandae repellendus quisquam voluptates!
    	
    	

    		
Lorem ipsum dolor sit amet.
    		
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!
    		
Quaerat iusto debitis sunt, distinctio sed magnam at vel. Ratione.
    		
Soluta repellat assumenda consectetur, voluptas ex cumque doloremque similique
quia.
    		
Doloremque rerum, quos earum maiores deleniti consequuntur natus facere
quam!
    		
Voluptatibus perferendis natus saepe nesciunt et eveniet vel voluptates
enim?
    	
    	
  	
Ленива Компани!
    


Ответ 2

Схлопывание марджинов не работает для блоков с установленным float. Вы можете убедиться
в этом, убрав float из стилей. Вертикальные margin'ы схлопнутся.

При позиционировании колонок я рекомендую не использовать вертикальные отступы для
самих колонок. Вместо этого вы можете задать вертикальные отступы для контента внутри
колонок. И тогда - вертикальные margin'ы будут корректно схлопываться.

В вашем примере я собрал контент в section, aside и footer блоках - в простые div,
и стилизовал их так:

section,
aside,
footer {
  background: #2db34a;
  color: #fff;
  margin: 0 1.858736059%;
  padding: 20px 0;
  text-align: center;
}

section > div,
aside > div,
footer > div {
  margin-top: 1.858736059%;
  margin-bottom: 1.858736059%;
}


Однако можно было бы, к примеру - задать верхний margin у заголовка в section. Он
является первым элементом внутри section, и его margin-top схлопывался бы с margin-bottom
у nav.

Рабочий пример на jsfiddle