Нежелательный белый интервал между разделителями в CSS/html

Может кто-нибудь объяснить, почему между #main_content (3 столбца) есть пробел и #footer?Нежелательный белый интервал между разделителями в CSS/html

Существует также и белое пространство над #main_content

Кроме того, <p> текст не совпадает.

Я попытался добавить margin:0; и padding:0; в разные divs, но он не работает. Надеясь, что кто-то может пролить свет на этот вопрос. Спасибо!

#main_content{ 
 
\t width:960px; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
#left_content{ 
 
\t background-color: red; 
 
\t width:280px; 
 
\t min-height: 350px; 
 
\t float: left; 
 
} 
 

 
#middle_content{ 
 
\t background-color: orange; 
 
\t margin-left:280px; 
 
\t margin-right:280px; 
 
\t min-height: 350px; 
 
} 
 

 
#right_content{ 
 
\t background-color: green; 
 
\t width:280px; 
 
\t float:right; 
 
\t min-height: 350px; 
 
} 
 

 
#footer{ 
 
\t min-height: 100px; 
 
\t background-color: grey; 
 
}

<html> 
 
<head> 
 
\t <link href="testcss.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 

 
<div id="main_content"> 
 
\t \t <div id="left_content"> 
 
\t \t \t <p>Lorem ipsum dolor sit amet, exercitation lorem wisi non, vitae dolor, ipsum interdum nam sociosqu quis rutrum, qui enim vel mattis proin nulla. Rutrum arcu viverra vestibulum in quisque nullam, et vivamus, ut malesuada in. Arcu dolor in magna pede, turpis mauris, erat sed enim metus wisi vestibulum, molestie rhoncus, nunc at sed taciti eu et. Duis nibh porta purus, donec posuere vestibulum sit, magna sit elementum, aenean volutpat</p> 
 
</div> 
 

 
\t <div id="right_content"> 
 
\t \t \t <p>Sociis vel magna nec, lorem magna duis. Nulla at ut vel, corrupti non ridiculus pellentesque dapibus iaculis. Nibh ultricies mollis eget sodales inceptos odio, nonummy auctor enim pellentesque. Quis arcu amet. Accumsan morbi nec risus, scelerisque nec amet semper duis purus class, cras amet vel eu praesent mauris, velit nisl vestibulum interdum turpis neque fermentum, sollicitudin nulla amet adipiscing non et et. Volutpat erat.</p> 
 
</div> 
 

 
\t <div id="middle_content" > 
 
\t \t \t <p>nec dignissimos magna wisi vitae. Quis auctor sapien suspendisse enim leo ac, quisque aliquet velit quis inceptos, sed quisque mattis eget lectus laoreet, est sagittis eu elementum rutrum. Elit fusce sodales aliquet et diam placerat, porttitor imperdiet praesent at id, nascetur suscipit, nisl et nulla. Ac at urna maecenas, vitae ullamcorper nunc aliquam, viverra habitasse id etiam aliquam. In dolores, accumsan nec ligula dolor felis.</p> 
 
</div> 
 

 
\t <div id="footer"> 
 
\t \t \t <p>nec dignissimos magna wisi vitae. Quis auctor sapien suspendisse enim leo ac, quisque aliquet velit quis inceptos, sed quisque mattis eget lectus laoreet, est sagittis eu elementum rutrum. Elit fusce sodales aliquet et diam placerat, porttitor imperdiet praesent at id, nascetur suscipit, nisl et nulla. Ac at urna maecenas, vitae ullamcorper nunc aliquam, viverra habitasse id etiam aliquam. In dolores, accumsan nec ligula dolor felis.</p> 
 
</div> 
 

 
</div> 
 
</body> 
 
</html>

источник

2015-01-23 cssnoob

'p' имеет по умолчанию' margin'. Вы должны удалить его ('#footer p {margin: 0;}') –

спасибо! работает! – cssnoob

Браузеры определяют запас по умолчанию (обычно 8px) для элемента тела - вот почему у вас есть место на самом верху. Пункты также имеют разницу по умолчанию, которую можно удалить с помощью css. Например:

Вы можете сбросить поля и отступы всех элементов к нулю:

* { 
    margin: 0; 
    padding: 0; 
}

Или вы могли бы быть более конкретным:

body { 
    margin:0; 
    padding:0; 
} 

p { 
    margin:0; 
    padding:0; 
}

источник

2015-01-23 01:11:14

Причина в том, что есть верхний/нижний запас на p элемент, поэтому просто добавьте:

p { 
    margin: 0; 
    padding: 0; 
}

источник

2015-01-23 01:38:23 wander

Нежелательный белый интервал между разделителями в CSS/html

ответ

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