divs之間的空白區域，簡單的HTML

我已經在這個網站上搜索和搜索這個解決方案，並試圖將所有的結果也應用到我的簡單的HTML中，但是沒有一個能夠工作。divs之間的空白區域，簡單的HTML

我確定有一個非常簡單的方法來做到這一點，因爲目前沒有任何代碼可以解釋。

我想要一個簡單的佈局，3 div s。一個主頁面div包含兩個水平的div s，我想要兩個div s內包含一張圖片，用作div背景中的背景，我可以獲取背景但不能擺脫白色的頁面行，我敢肯定你們都厭倦了閱讀。

我得到在「header」和「site」之間出現的線div s。我相信這是一個簡單的解決方案。

我想保持HTML儘可能簡單，只打算有三個三個鏈接，一旦空間不足，我將放入，因爲我確信我可以將解決方案應用於更多div s。

我也掙扎上傳代碼，請指教

HTML：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <div id="mainwrap"> 
      <div id="header"> 
      </div> 
      <div id="site"> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

#header{ 
    width:1080px; 
    margin:0; 
    height:285; 
    background: url(header.jpg); 
    float:left; 
} 

#site{ 
    width:1080px; 
    margin:0; 
    height:480; 
    float:left; 
    background: url(main.jpg); 
} 

#mainwrap{ 
    width:1280px; 
    height:750px; 
    margin:auto; 
    background-color:#FFFFCC; 
}

非常感謝，如果有人可以張貼的解決方案。

來源

2013-08-19 James Davies

由於容器的字體大小，您遇到此問題。將容器的line-height和font-size設置爲0，空間將消失。

如果仍不能解決問題，刪除任何空格（包括製表符或換行符）從你的HTML這樣的代碼塊相互接觸，像這樣：

</div><div> 
// ^^ no space here

但是，請記住，字體樣式聲明將逐漸下降到容器的子項中，因此請務必在其中設置font-size和line-height恢復正常。

來源

2013-08-19 23:20:49 Bryce

我試着將你的代碼輸入到jsFiddle中，但我無法重現你看到的相同結果（用白線）。可能只是我的瀏覽器...

但是，我認爲這將有助於解決您的問題。我發現在你的CSS文件中包含一個CSS Reset是個好主意。這樣可以擺脫所有那些不需要的空間，邊距和其他一些以後會很痛苦的事情。

嘗試從這個網站添加CSS： http://meyerweb.com/eric/tools/css/reset/

或者只是谷歌「CSS重置」和使用任何CSS樣本。你會將CSS添加到你現有的CSS中......重置只是確保所有邊距，填充等被設置爲零。

來源

2013-08-19 23:24:59 Charlie74

重置是一個非常強大和廣泛的掃描覆蓋，並不建議在每個項目。我認爲，雖然重置可能（或可能不）解決這個空白問題，但它可能是一種解決方案 – Bryce

像先生一樣。布賴斯說，你需要設置較小的行高以儘可能將小尺寸修復爲頁面源代碼的div，但請注意，如果在一般主體的CSS中，行高不同，例如：

body{ 
    margin:0px; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#545454; 
    line-height:18px; 
}

如果你的DIV需要diferent線高度，字體大小的website一些speciffic部分，你需要設置一個類來，然後，鏈接如下：

#mainwrap{ 
    width:1280px; 
    height:750px; 
    margin:auto; 
    background-color:#FFFFCC; 
    line-height:18px; 
}

來源

2013-08-19 23:37:03 bicaribas

添加到每個元素在css文件中

{overflow: hidden;}

適合我。

來源

2015-01-11 02:10:54 kanibalv

如果你希望你的div之間的界限消失，你只需在你的CSS中添加一行代碼即可。這行代碼是BORDER我相信1到3個像素的邊框就沒問題。

#header{border:1px;}

你可以改變你的邊界同樣的方式的顏色，以及：

#header{border-color:#ffffff;}

例如：

HTML

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
</head> 
<body> 
    <div id="mainwrap"> 
     <div id="header"> 
     </div> 
     <div id="site"> 
     </div> 
    </div> 
</body>

CSS

#header{  

border:1px;  

width:1080px; 
margin:0; 
height:285;`enter code here` 
background: url(header.jpg); 
float:left;} 

#site{ 

border:1px; 

width:1080px; 
margin:0; 
height:480; 
float:left; 
background: url(main.jpg); } 

#mainwrap{ 

border:1px; 

width:1280px; 
height:750px; 
margin:auto; 
background-color:#FFFFCC;}

來源

2016-05-11 22:42:26

divs之間的空白區域，簡單的HTML

回答

相關問題