Question

我的html中有一个名为logo的div，我想要做的就是删除margin-top or padding-top徽标，这样就不会对身体背景产生影响。

我已经尝试了上述内容，但我无法让它让步。

HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Template 2011</title>
    <link rel="stylesheet" href="_assets/css/style.css">
</head>
    <body>
        <header>
            <div id="logo"></div>
                <div id="line"></div>
                <nav>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </nav>
        </header>
        <section id="banner">
            <img src="_assets/images/banner_1.jpg" alt="Banner" width="960px" height="161px" />
        </section>
            <section id="content">
                <h1>Web Development Guru At Your Service </h1>
                    <p></p>



</section>
    <footer>
            <p>This is the footer</p>
        </footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="_assets/js/cufon-yui.js" type="text/javascript"></script>
            <script src="_assets/js/Myriad_Pro_400-Myriad_Pro_700.font.js" type="text/javascript"></script>
            <script src="_assets/js/js.js" type="text/javascript"></script>

CSS：

html{
    height:100%;
    width:100%;
    background:url(../images/bg.jpg) repeat;
}
body{
    width:960px;
    height:100%;
    background-color:#e3e3e3;
    margin:42px auto;
}
p,h1,h2{
    margin:25px;
    font:Myriad Pro;
}
h1{
    color:#000;
}
header{
    width:100%;
    height:210px;
}
#logo{
    height:115px;
    width:159px;
    margin:0 auto;
    background:url('../images/logo.png') no-repeat;
    border:1px solid red;
}

header nav{
    width:410px;
    height:18px;
    margin:20px auto;
}
header nav ul{
    width:100%;
    height:18px;
    margin:0 auto;
}
header nav ul li{
    float:left;
    display:block;
    margin:0 auto;
}
header nav li a{
    float:left;
    width:85px;
    padding:0 3px 3px 3px;
    font:18px Myriad Pro;
    text-decoration: none;
    color:#99999a;
}
header nav li a:hover, a:active{
    font:18px Myriad Pro bold;
    color:#67686a;
}
#line{
    clear:both;
    width:610px;
    height:1px;
    margin:0 0 0 235px;
    background:url('../images/line.png') no-repeat;
}
#banner{
    width:100%;
    height:161px;
}
#content{
    float:left;
    width:100%;
    height:100%;
    background-color:#e3e3e3;
}
footer{
    clear:both;
    height:24px;
}

Answer 1

因为它是背景图像，你必须在div 之外添加空间（通过填充或边距）。

<div style="padding:10px;"> <div id="logo"/> </div>

Answer 2

最好使用图像替换技术。使用<h1>代码而不是<div>

HTML

<h1 id="logo">This is my logo</h1>

CSS

#logo{
    height:115px;
    width:159px;
    margin:0 auto;
    background:url('../images/logo.png') no-repeat;
    background-repeat: no-repeat;
    border:1px solid red;
    text-indent:-9999px;
    display:block;
    overflow:hidden;
}

徽标div不会让步

2 个答案: