在包裝-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跨度不是零保證金

回答

相關問題