Question

我对此示例有疑问：http://jsfiddle.net/JYkUS/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FSou1::Верстка макета</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="logo-wrapper">
            <div class="logo">
                <a href="#">
                    <img src="images/logo.png" alt="Logo" width="90" height="90" />
                </a>
            </div>
            <div class="logo-text">
                <span>Happy Nanny</span>
            </div>
            <div class="menu">
                <ul>
                    <li class="first"><a href="#">HOME</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">NEWS & PRESS</a></li>
                    <li><a href="#">FIND JOB</a></li>
                    <li><a href="#">CONTACTS</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>  
    </body>
</html>

带文字的跨度

<span class="easy-way">THE EASY WAY</span>

默认有margin-left，但我不知道为什么。我真的不想为margin-left设置负值。是否可以将此跨度与左边界对齐，为什么它现在具有这样的值的余量？

P.S。在谷歌浏览器中观看（火狐没有此保证金）

enter image description here

修改

如果我删除此样式：

.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}

我的跨度转到左边界= \但为什么会这样？

EDIT2：其他方式，将<div class="clear"></div>从'logo-wrapper'容器移至root级别

<div class="logo-wrapper">
            <div class="logo"></div>
            <div class="logo-text"></div>
            <div class="menu"></div>
            <!-- FROM HERE -->
        </div>

        <div class="clear"></div> <!-- MOVE HERE -->

        <div class="header">
            <div class="header-text">
                <span class="easy-way">THE EASY WAY</span>
                <span class="find-the-best">TO FIND THE BEST</span>

                <div class="clear"></div>

                <p>babysitters, childminders, nannies or private tutors</p>
            </div>
        </div>

但仍然无法理解，为什么浮动仍然在内心明确后工作：两个div

EDIT3：是因为浮动：右边的菜单甚至比“清晰”的div更“rt”，两者都是？

Answer 1

边距实际应用于body标签。您可以使用以下方法删除它：

body {
    background: none repeat scroll 0 0 #F8F7E5;
    font-family: Arial;
    font-size: 100%;
    margin-left: 0;
    margin-top: 40px;
}

工作示例： http://jsfiddle.net/JYkUS/2/

这通常使用reset.css文件来处理，该文件会从页面中删除所有特定于浏览器的样式，因此您可以在创建符合跨浏览器的网页时从单个基点开始。我建议将这样的策略应用到网站上。

Answer 2

这是因为您尚未将正文margin设置为0

将其设为margin:40px 0 0 0

body {
    margin: 40px 0 0 0;
    font-size: 100%;
    font-family: Arial;
    background: #f8f7e5;
}

<强> DEMO

在wrapper-div中不是span的span余量

2 个答案: