然而div之間出現另一個空白

-2

對不起，問同樣的問題很多在我之前問...我已經閱讀了大量的這些，他們都表示變化然而div之間出現另一個空白

margin: 0;

有（在兩個div之間的間隙div class =「heady」和div class =「menus」）我似乎無法擺脫白色空間，希望它足夠清楚，讓我知道如果它不是。

謝謝詹姆斯。

HTML

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <title>website</title> 
     <link rel="shortcut icon" href="favicon.ico"/> 
    </head> 
    <link rel="stylesheet" type="text/css" href="CSS/style1.css" /> 
    <body> 
    <div class="heady"> 

    <br></br> 
    <h1><a class="header" href="index.html">website</a></h1> 
    </div> 

    <div class="menus"> 

    <ul> 
     <il><a class="list" href="x.html">About</a></il> 
     <t> | </> 
     <il><a class="list" href="y.html">Beginners</a></il> 
     <t> | </> 
     <il><a class="list" href="z.html">Advanced</a></il> 
     <t> | </> 
     <il><a class="list" href="contact.html">Contact</a></il> 

    </ul> 
    </div> 

    </body> 
</html>

CSS

/*general rules*/ 

html,body { 
    font-size:11pt; 
    font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif; 
    color: black; 

    padding-left: 5px; 
    padding-right: 5px; 
    padding-bottom: 0px; 
    background-color: white; 
    padding-top: 0px; 
    margin-top: 0px; 

} 

h1 { 
    font-size: 25pt; 
    margin-left:10px; 
    margin-bottom:0; 
    padding-bottom: 0; 
} 

a:link, a:visited { 
    color: white; 
} 
a:hover, a:active { 
    color: grey; 
} 



/*header section rules*/ 
div.heady { 
      height: 200px; 
      width: 760px; 
      padding: 0; 
      background-color: grey; 
      background-repeat:no-repeat; 
      margin: 0; 
} 

a.header { 
    text-decoration: none; 
} 
a.header:link, a.header:visited, a.header:active,a.header:hover { 
    color: red; 
    margin:0; 

} 

div.menus { 
padding: 0; 
margin:0; 
background-color:black; 
width: 760px; 
text-align: center; 
font-size:12pt; 

} 

a.list { 
margin:0; 
}

這裏是一個jsFiddle的鏈接。

來源

2012-05-16 jimmyp1399473

有在此的jsfiddle沒有空格：http://jsfiddle.net/lucuma/ZDEWd/ – lucuma

沒有空格的位置：http://jsfiddle.net/7K4BP/ –

@lucuma，MichaelRobinson：您需要關閉「正常化CSS」複選框 – user123444555621

瀏覽器應用默認樣式ceratin元素。在這種情況下，它是ul獲得一些保證金。請注意，即使div本身沒有邊距，此邊距也會將div分隔開。

使用

ul { margin: 0; }

或包括reset stylesheet

來源

2012-05-16 19:43:04 user123444555621

這工作。謝謝 – jimmyp1399473

.heady { display:block; } 
    .heady { margin:0; padding:0; } 
    .heady { line-height:100%; /* or even 0 (if no text present) */ }

內容可以在這裏欺騙，但其中的1個或全部3個應該馴服跨瀏覽器的野獸。

谷歌的「CSS復位」太

來源

2012-05-16 19:38:43

是的，完全的CSS重置 – jimmyp1399473

您使用的是螢火蟲插件的Firefox？即使你還沒有使用firefox，你應該與firebug插件一起下載。使用Firebug，您可以查看源代碼中的元素，並查看正在應用的樣式，佈局（寬度/高度，填充，邊距），甚至可以操作樣式來查看CSS中的變化。

我高度推薦它！

Download Firefox
Download Firebug

來源

2012-05-16 20:10:47

然而div之間出現另一個空白

回答

相關問題