空間 - 優文庫

好了，所以我想從頭開始構建這個HTML5網站的CSS，我試圖努力消除所有的元件之間的空間：頭，導航，文章，和頁腳空間

他們都呆在那裏。我知道這是一個非常基本的問題，但我花了一些時間，但仍然無法確定發生了什麼。

任何想法如何刪除它？

（如果您複製並保存這些文件，你會看得很清楚的空間）

謝謝

CODE：

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>My first website</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="wraper"> 
    <header> 
     <h1>Header</h1> 
    </header> 
    <nav> 
     <ul> 
      <li> 
       Inicio 
      </li> 
      <li> 
       Conceito 
      </li> 
      <li> 
       Fotos 
      </li> 
      <li> 
       Informações 
      </li> 
      <li> 
       Contato 
      </li> 
     </ul> 
    </nav> 
    <article> 
     <p> 
      Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
      abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
      Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
      abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
      Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
      abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum. 
     </p> 
    </article> 
    <footer> 
     <p>Rua B, Lote 16, Vila Dom Pedro I, Paraty</p> 
    </footer> 
</div> 
</body> 
</html>

CSS代碼：

body { 
    margin: 0; 
    height: 100%; 
    font-family: sans-serif; 
    background-color: #F2E8BD; 
} 

.wraper { 
    width: 960px; 
    background-color: #CCC49F; 
    margin-left: auto; 
    margin-right: auto; 
} 

nav, header, footer { 
    margin-top: 0; 
    padding: 0; 
    margin: 0; 
} 

nav ul{ 
    margin: 0; 
    } 

header{ 
    background-color: #F0F; 
} 

nav{ 
    background-color: #08A; 
} 

nav li{ 
    display: inline; 
} 

article { 
    background-color: yellow; 
} 

footer { 
    margin: 0; 
    background-color: red; 
    }

來源

2013-07-25 Davi Trindade

如果您通過瀏覽器的調試工具瀏覽生成的HTML文件，則會看到它們具有保證金的CSS值ES。例如，標題在Safari上的頂部和底部有21px。

更改CSS來消除這種填充 - 例如，對於頭：

header, header h1 { 
    background-color: #F0F; 
    margin: 0 
}

出話題，但header，footer和nav真正有效的HTML5元素的名字呢？

來源

2013-07-25 14:14:50

保證金的包裝元素的CSS被刪除。是的，你提到的所有元素都是有效的HTML5標籤。請參閱[本MDN文章]（https://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document）。 – Sirko

您消除了包裝容器上的所有邊距，但不包括相應的內容，如<p>和<h1>。

要刪除所有的空間，眼前這個（或類似的東西）添加到CSS：

h1 { margin: 0 } 
p { margin: 0 }

Example Fiddle

來源

2013-07-25 14:15:27 Sirko

perfecto。謝謝。 –

@DaviTrindade如果答案解決了您的問題，請接受該答案（請參閱答案左上方的複選標記）。這樣，你告訴其他人，這是適當的解決方案。 – Sirko

空間

回答

相關問題