Ryan A. Ryan A. - 2 months ago 10
CSS Question

remove vertical space html

This should be a simple question, but I haven't been able to find the answer. In creating a single-column html/css design, there is extraneous space vertically between elements that I cannot account for.

The space occurs between sections and can be moved by setting the section top margin to

-20px
, but this approach shouldn't be necessary. Any help would be greatly appreciated.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
body {
padding:0;
background-color: #888888;
width:800;

margin-top:0;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
display:block;
vertical-align:0;
}

section {
display:block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;

padding-top:0;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;

background-color: #CCCCCC;
width:760px;
}

article {
margin:0;
padding:0;
background-color: #EEEEEE;
}
</style>
<title>Title</title>
</head>
<body>

<section>
<h2> Section 1 </h2>
<article>
<p> Text here.
</p>
</article>
</section>
<section>
<h2> Section 2 </h2>
<article>
<p> Text here.
</p>
</article>
</section>
</html>

Answer

This margin is from your browsers default css (user agent style) for the h2 headlines. You can get rid of it by setting the margin to zero.

h2 {
     margin-top: 0;
}
Comments