Question

我的div包含一个img元素，然后在下面是一个div元素，然后是另一个img元素。

我的问题：这些元素之间不应存在垂直间隙。但是，中间div和amp之间存在10 / 20px的垂直间隙。 imgs（在顶部和底部）。

如何消除内部div和amp;之间的垂直间隙？ 2 img元素？

    <!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>

Answer 1

空格是由P标签的边距推动IMG标签引起的。由于CSS的工作方式，除非你在其上设置边框，否则DIV的背景不会覆盖段落的边距。如果您添加代码

div { border: 1px solid red; }

到你的CSS，你可以看到DIV实际上完全接触了IMG。

Answer 2

这是因为<p>标记上的浏览器默认边距。你可以看到，如果你添加像p {margin：0px;对你来说，图像触及了div，但你的文字也被“挤压”在一起

Answer 3

在div中设置段落的边距。由于P具有默认边距，您必须先清除该边距或将其设置为您想要的值。

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

如果你想在p内部有一些差距，你可以像p:first & p:last

那样设置第一个和最后一个

Answer 4

由于它涉及图像，我很难重新产生问题。尽管尝试以下方法：

删除IMG和DIV标记之间的换行符（和/或空格），如下所示：

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

Answer 5

div是block level element。这意味着div将始终位于自己的新行中。如果要将div元素放在另一个元素的行中，请创建div inline。

div {
  display:inline;
}

img＆amp; amp;一个div

5 个答案: