Geek Answers Handbook

Why do the <p> and <h1> elements cause spaces in my layout?

If I have the following html:

<body>
    <div id="mainTop">
    </div>
    <div id="main">
        <h2>
            <%= Html.Encode(ViewData["Message"]) %></h2>
        <p>
            To learn more about ASP.NET MVC visit 
                http://asp.net/mvc</a>.
        </p>
    </div>
    <div id="mainBottom">
    </div>
</body>

With the following CSS:

#mainTop
{
    background: url('/Content/Images/bg_top.png') no-repeat;
    width: 963px;   
    height: 65px;
    margin: 0 auto;
    text-align: left;
    color: #5d676d;
}

#main
{
    background: url('/Content/Images/bg_middle.png') repeat-y;
    width: 963px;   
    min-height: 50px;
    margin: 0 auto;
}

#mainBottom
{
    background: url('/Content/Images/bg_bottom2.png') no-repeat;
    width: 963px;   
    height: 128px;
    margin: 0 auto;
}

It looks like this:

alt text

Why do some tags, such as <p> and header tags, cause spaces in my layout? Ideally, I would not want to have these huge spaces between my content.

+5
source share
6 answers

By default, <p>and <h2>(among others) have fields and gaskets associated with them. Try adding the following to your CSS:

p, h2 {
  margin: 0px;
  padding: 0px;
}

If the filling does not affect the border and background of the elements, but depending on what you want, you can try deleting them, as well as I am here.

: Guffa , , DIVs, .

+17

, - YUI Reset. CSS - .

+3

- . -, , . . (, div ), (h2 p) , .

, , IE ( , 7) .

div (, ), .

+3

, . h1 p div. , :

h1,p { margin: 0; }

div:

#main { padding: 1px; }

, , HTML , </a>.

+2

css reset css?

0

() CSS , auto-padding/marginins:

*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}

:

*
{
   margin: 0;
   padding: 0;
}

.

0
source

More articles:


All Articles