Gaps between an img & a div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-20 22:36 出处：网络

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

相关专题：css javascript

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"开发者_JAVA百科><!-- 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>

The spaces are caused by the P tags' margins pushing the IMG tags away. Because of the way CSS works, the DIV's background doesn't cover the paragraphs' margins unless you set a border on it. If you add the code

div { border: 1px solid red; }

to your CSS, the you can see the DIV actually touches the IMG exactly.

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

It is because of browsers default margins on your <p> tags. You can see that if you add something like p{ margin: 0px; } to you css, the image touches the divs, but your text is also "squished" together

As it involves images, it will be hard for me to re-produce the issue. Though try the following:

Remove newline (and or spaces) between IMG and DIV tags, like the following:

<img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/><div class="pageBoxContent">

div is a block level element. That means a div will always be in a new line of its own. If you want to put your div element in the line of another element, make your div inline.