在包装-DIV跨度不是零保证金

我有一个问题，这个例子：http://jsfiddle.net/JYkUS/在包装-DIV跨度不是零保证金

<!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>

为默认有边距，离开了，但是我不知道为什么。我真的不想为余裕设定一个负值。是否可以将此跨度与左边界对齐，并且为什么它现在具有这样的值的余量？

P.S.谷歌浏览器观看（Firefox不会有这个保证金）

enter image description here

编辑：

只是如果我删除此样式：

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

我的跨度去左边界= \但为什么这样呢？

EDIT2：其他方式，从“标志，包装”容器移动<div class="clear"></div>，以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：是因为float：right菜单甚至比“div”更清晰：都是？

来源

2013-03-07 user1612334

没有看到'。易-way'保证金在铬25 – Imperative 2013-03-07 10:48:36

正如你可以看到，我有。版本铬25.0.1364.152 m = \ – user1612334 2013-03-07 10:51:52

边距实际上应用于车身标签。您可以使用删除：

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文件，该文件将删除页面的所有浏览器特定的造型通常处理的，所以你可以从一个单一的基点开始当创建一个跨浏览器兼容的网页。我会建议在网站上应用这样的策略。

来源

2013-03-07 10:41:16

它不工作= \我需要对齐'容易的方式'左边框，作为徽标图像（其中是p左边框） – user1612334 2013-03-07 10:45:08

我添加了一张图片= \ – user1612334 2013-03-07 10:49:56

那是因为你没有身体margin设置为0

让它margin:40px 0 0 0

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

DEMO

来源

2013-03-07 10:43:28 Sowmya

它不工作= \ – user1612334 2013-03-07 10:44:25

你检查过演示吗？它在那里工作。 http://jsfiddle.net/JYkUS/3/检查此我已添加bg颜色以进行说明 – Sowmya 2013-03-07 10:45:18

在您的示例中，Google Chrome中的'EASY WAY'以徽标左边界开始？我没有这样= \ – user1612334 2013-03-07 10:47:34

在包装-DIV跨度不是零保证金

回答

相关问题