Question

在我的照片和菜单栏周围，我有一点空间，我想摆脱它。我试图将保证金设置为0，但这并没有奏效。有谁知道我怎么能解决这个问题？

this is an image of the result that i get

＆＃13;

<HintPath>N:\SomeAssembly\lib\net45\SomeAssembly.dll</HintPath>

＆＃13;

<!doctype html>
     <html>
	<head>
	   <meta charset="UTF-8">
	   <title>index</title>
	   <link rel="stylesheet" href="CSS.css">
	</head>
	
    <body>
    <p id="Anouk"><img src="logo/Hout.png" width="1000px" alt="Logo"/></p>
    <div id="header">
        <div id="menu">
            <!--Home-->
            <li id="home"><a href="index.html"><img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'"/></a></li>
            <!--Over Mij-->
    	    <li id="over"><a href="over.html"><img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'"/></a></li>
    	    <!--Portfolio-->
            <li id="portfolio"><a href="portfolio.html"><img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'"/></a></li>
            <!--Contact-->
            <li id="contact"><a href="contact.html"><img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'"onmouseout="this.src='Iconen/Contact.png'"/></a></li>               
        </div>
    </div>
    </body>
</html>

＆＃13;

Answer 1

利＆＃39; S

li {
    display: block;
    float: left;
}

这应该可以解决问题。

为什么会这样？浏览器将代码中的换行符解释为空格，结果是内联和内联块元素 - 那些尊重空格的元素 - 与另一个元素间隔开。
块元素不尊重它们。

图像

可能的问题：
浏览器填充/边距，将以下内容添加到您的CSS

html, body{
    margin: 0;
    padding: 0;
}

您的<p id="Anouk">应该有保证金，对非内容元素使用<div>

<div id="Anouk"><img src="logo/Hout.png" width="1000px" alt="Logo"/></div>

图像和菜单栏周围的空间

1 个答案:

利＆＃39; S

图像