Question

可以下载img.jpg并使用以下css文件保存在同一目录中。

<head>
<style type="text/css">
#header {
    width: 917px;
    height: 150px;
    margin: 0 auto;
    border:2px solid red;
}   
#logo h1 {
    margin: 0 ;
    float: left;
    padding: 50px 0 0 40px;
    font-size: 36px; 
    border:2px solid red;
}
#logo h2 {
    margin: 0 ;
    float: left;
    padding: 72px 0 0 60px;
    font-size: 12px;
    border:2px solid red;
}
#menu {
    margin: 0 ;
    float: right;
    border:2px solid red;
    padding: 70px  0 0 0 ;
}
#menu li {
    display: inline;
}
#splash {
    width: 877px;
    height: 140px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
    <div id="logo">
            <h1>company web</h1>
            <h2><a href="#">new life new start</a></h2>
    </div>
    <div id="menu">
            <ul>
                    <li><a href="#" accesskey="1" title="">contact us</a></li>
                    <li><a href="#" accesskey="2" title="">about us</a></li>
                    <li><a href="#" accesskey="3" title="">project</a></li>
                    <li><a href="#" accesskey="4" title="">product</a></li>
                    <li><a href="#" accesskey="5" title="">service</a></li>
            </ul>
    </div>
</div>
<div id="splash">
    <a href="#"><img src="img.jpg" /></a>
</div>
</body>
<body>
</body>
</html>

将css文件保存为test.html并使用firefox打开它。

为什么无法获得如下结果？

对于#menu，margin: 0 ;padding: 70px 0 0 0 ;根本不起作用，为什么？

Answer 1

如您所知，html元素主要有一些默认属性。因此，你应该在你的css文件中使用css reset来管理所有这些。

如果您使用

，则为您

#menu  ul {
    margin: 0;
    padding: 0;
}

然后你得到了预期。

或者您可以使用*

来使用通用类

*{
  margin:0px;
  padding:0px;
}

Answer 2

将此应用于您的风格

#menu ul {
    padding: 0px;
}

为什么margin 0无法删除空格到css？

2 个答案: