Html元素不對齊所有的左邊路

我不是新來的HTML或CSS，但我真的不知道爲什麼會發生這種情況。我可能只是啞巴，這是一個簡單的問題，有些事情是錯誤的。我真的遇到了這個問題。我有一個非常簡單的網頁與div元素。無論我做什麼，我仍然在頂部，側面和底部都有空間。這是一張照片。Html元素不對齊所有的左邊路

這是我的HTML和CSS代碼。

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>Home</title> 
 
    <style> 
 
     .SideBar { 
 
     background: #4c4c4c; 
 
     float: left; 
 
     height: 100%; 
 
     margin-left: 0px; 
 
     padding-right: 25px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body style="background-color: #05bcff"> 
 
     <div class="SideBar"> 
 
      <p style="margin: 0px; padding: 0px"> 
 
      asd 
 
      </p> 
 
     </div> 
 
     </body> 
 
    </html>

來源

2017-04-21 thebootsie123

從哪裏刪除空格...在div元素上？ – Harsheet

你應該分配margin 0，並在你的造型padding 0至body元素。

來源

2017-04-21 01:26:59

感謝您的回答。從下面的答案我現在清楚瞭解爲什麼會發生這種情況。 – thebootsie123

發生這種情況是因爲<body>元素在某些瀏覽器中默認具有邊距。不同的瀏覽器可以選擇將一些基本的默認樣式應用於元素。例如，Chrome默認情況下會添加8像素的邊距。如果你設置了

body { 
    margin: 0px; 
}

這會消失。

更好的方法是在代碼中包含Reset.css或Normalize.css。 Reset.css將完全取消所有樣式，以便您所寫的內容正是所顯示的內容。這給你最大的控制，但對大多數情況下它太多了。例如，<h1> , <h2> , <h3>..標記在應用Reset.css後將全部看起來相同。

Normalize.css另一方面保留了有用的樣式，但會確保您的元素在所有瀏覽器中呈現一致。這在大多數情況下是首選。

在Codepen你甚至可以試試這些。如果您點擊「設置」，您可以選擇在CSS中添加「正常化」或「重置」。你可以玩弄這些看看你的元素是如何顯示在每個下面。

來源

2017-04-21 01:29:51 redFur

謝謝。我會嘗試Normalize。 – thebootsie123

由於前端員工說，只是添加

.body{ 
    margin: 0; 
    padding: 0; 
}

很多人員工CSS重設碼在他們的樣式表的頂部，其中包括這一點。它基本上是一個默認覆蓋，清除元素上的任何樣式，允許您從一個乾淨的石板開始請參閱（http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/）

來源

2017-04-21 01:30:44 Rando

謝謝你的回答。我會看到閱讀。 – thebootsie123

Html元素不對齊所有的左邊路

回答

相關問題