img＆a div之間的空白

我有div，它包含一個img元素，然後直接在下面是div元素，然後在下面是另一個img元素。img＆a div之間的空白

我的問題：這些元素之間應該沒有垂直差距。但是會發生什麼情況是中間div & imgs（頂部&底部）之間存在10/20px的垂直間隙。

我該如何去除2個img元素之間的內部div &之間的垂直間隙？

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

來源

2011-07-15 Mack

在div中設置段落的邊距。由於P有一個默認邊距，所以你必須首先清除或設置爲你想要的價值。

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

如果你想裏面p一定的差距，您可以設置第一個和最後一個只喜歡p:first & p:last

來源

2011-07-15 05:14:24 Sarath

謝謝，我得到是什麼導致它現在:) – Mack

由於涉及的圖像，這將是我很難再產生問題。雖然嘗試以下方法：IMG和DIV標籤之間

刪除換行符（和或空格），如下所示：

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

來源

2011-07-15 04:55:54

不，它不需要把我所有的HTML在一個行不改變任何事情 – Mack

div是一個block level element。這意味着div將永遠在它自己的新行中。如果你想把你的div元素放在另一個元素的行中，請使用div inline。

div { 
    display:inline; 
}

來源

2011-07-15 05:03:04 Sparky

這些空格是由P標籤的頁邊距推送IMG標籤引起的。由於CSS的工作方式，DIV的背景不會覆蓋段落的邊距，除非您在其上設置邊框。如果你添加了代碼

div { border: 1px solid red; }

到你的CSS，你可以看到DIV實際上觸及了IMG。

來源

2011-07-15 05:06:19

這是因爲您的<p>標籤上的瀏覽器默認頁邊距。你可以看到，如果你添加像p {margin：0px; }給你的CSS，圖像觸及divs，但你的文字也一起「擠壓」

來源

2011-07-15 05:09:30 Paulpro

img＆a div之間的空白

回答

相關問題