Home/ Questions/Q 237729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T20:26:54+00:00

If I have the following html: <body> <div id=mainTop> </div> <div id=main> <h2> <%=

  • 0

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 certain tags like <p> and the heading tags cause gaps in my layout? Ideally, I would like to not have those huge spaces in between my content.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By default <p> and <h2> (among others) have margins and paddings associated with them. Trying adding the following to your CSS:

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

    Having padding won’t affect the border and background of the elements, but depending on what you want, you might want to try removing them as well as I do here.

    Edit: as Guffa pointed out in an answer below, the reason that the margins of the paragraph and heading are reaching outside their container DIVs is due to collapsing margins.

    • 0