設置標題中h1元素的上邊距不能按預期工作
[英]setting the top margin of the h1 element in the header does not work as expected
問題描述
我已經使用了html5標頭標簽和h1標簽。 在我的標題中的h1元素的上邊距屬性設置為0px后，我設法刪除標題的上邊距，但我希望我的標題內的h1元素具有大約15px的上邊距。
現在，當我嘗試設置h1元素的上邊距時，它還會為我不想要的標題創建一個上邊距。
有人可以幫我解決這個問題嗎？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="normalize.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Codename : ENT</title>
</head>
<body>
<header>
<h1>Site Title / LOGO</h1>
<p>Site Tagline / Slogan / One liner.</p>
<p></p>
<nav></nav>
</header>
<div id="content_wrapper"></div>
<footer>
</footer>
</body>
</html>
和CSS
header {
background-color:#ff0
}
header h1 {
margin-top:0;
margin-left:15px
}
header p {
margin-left:15px
}
6 個解決方案
解決方案1
7 已采納 2014-08-04 08:08:35
對於h1或header使用padding-top或使用overflow:hidden作為header
解決方案2
5 2014-08-04 08:24:37
您在這里面臨的問題是調用折疊邊距
以下是這篇mozilla文章的摘錄：
父母和第一個/最后一個孩子
如果沒有邊框，填充，內聯內容或間隙將塊的邊距頂部與其第一個子塊的邊距頂部分開，或者沒有邊框，填充，內聯內容，高度，最小高度或最大值 - 高度將塊的邊緣底部與其最后一個子節點的邊緣底部分開，然后這些邊距崩潰。 折疊的保證金最終在父母之外 。
所以我可以通過在標題元素 - DEMO中添加邊框來解決這個問題
header {
border: 1px solid transparent;
}
或者通過清除 - DEMO
header {
overflow: hidden;
}
或者通過添加填充 - DEMO
header {
padding: 1px;
}
......等等
解決方案3
2 2014-08-04 08:17:25
正如前面提到的那樣，你真正想要的是填充頂部，而不是邊緣頂部。
這兩者之間的區別很容易理解，基本上填充在元素內部，而邊距在元素之外，本教程的最后兩個例子顯示它相當好http://html.net/tutorials/css/lesson10。 PHP
因此，對於您的代碼，header元素是容器，添加margin-top:15px將元素向下移動15px，這意味着整個容器，包括黃色背景，位於較低位置。 添加padding-top:15px ，將標題元素的高度增加15px，添加到元素的頂部，然后向下移動內容，在頂部留下15px的黃色間隙。
解決方案4
1 2014-08-04 08:09:59
添加padding-top: 15px; 到h1的屬性。
解決方案5
1 2014-08-04 08:11:57
試試這個
header h1 {
padding-top:15px;
margin-top:0;
margin-left:15px
}
解決方案6
1 2014-08-04 08:26:31
CSS
header {
background-color:#ff0;
margin:0;
display: inline-block; /* add this to make it inline as <header> id block element by default */
width: 100%; /* for 100% width */
}
header h1 {
margin-top:15px;
margin-left:15px
}
header p {
margin-left:15px
}
將margin-top設置為h1后，如何刪除div上方的空白？
[英]how do i remove white space above div after setting margin-top to h1?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.