Home/ Questions/Q 6129647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:46:02+00:00

I have div that contains a img element then directly below that is a

  • 0

I have div that contains a img element then directly below that is a div element then below that is another img element.

My Problem: there should be no vertical gaps between any of those elements. But what happens is that there is a 10/20px vertical gap between the middle div & the imgs(on top & bottom).

How do I remove the vertical gap between the inner div & the 2 img elements?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
    <!--

        /* Test Specific */

/*Perform CSS Reset*/
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        .pageBox                    { width: 700px; display: block; }
        .pageBoxContent             { background: url("images/pageBoxMid.png") repeat-y; background-color: red;
                                      padding-right: 50px; padding-left: 50px; width: 700px; }
        .pageBoxContent p           { font-family:Calibri, "Myriad Pro", Serif; }
        .pageBoxTop                 { background-color: blue; }
        .pageBoxBottom              { background-color: blue; }

    -->
    </style>

</head>
<body>

    <div>

        <div class="pageBox">
            <img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/>
            <!-- Gap appears here on display -->
            <div class="pageBoxContent">
                <p class="subHeading">Upcoming Events</p>
                <p>abcedefdfdgdf</p>
                <p>abcedefdfdgdf</p>
                <p>abcedefdfdgdf</p>
                <p>abcedefdfdgdf</p>
            </div>
            <!-- Gap appears here on display -->
            <img class="pageBoxBottom" src="images/pageBoxBottom.png" alt=""/>
        </div>
        <br/>

        <br/>

    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set the margin for the Paragraph inside the div.Since P has a default margin you have to clear that first or set that to your desired value.

    .pageBoxContent p{ font-family:Calibri,"Myriad Pro", Serif; margin:0;//adjust it}

    If you want some gap inside p , you can set the first and last only like p:first & p:last

    • 0