如何刪除頂部的空白
[英]how to remove white space on the top
問題描述
我正在嘗試在materializecss的導航欄上方創建頂級巨型飛機。這是我的template.php代碼：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="includes.css"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="top">
<h1>Hello Sykox</h1>
</div>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
這是includes.css的代碼
.top {
height: 170px;
background-color: #ef9a9a;
margin: 0px;
}
不幸的是，在最上方出現了空白，即使有空白，它也不會消失：0px; 或margin-top：0px;
所以知道如何刪除它嗎？
3 個解決方案
解決方案1
3 已采納 2016-02-09 06:43:48
嘗試這個 ：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<style>
html, body, h1, h2, h3, h4, h5, h6, div {
padding: 0;
border: 0;
margin: 0;
}
.top {
padding: 0;
height: 170px;
background-color: #ef9a9a;
margin: 0px;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="top">
<h1>Hello Sykox</h1>
</div>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
說明：
每個瀏覽器都有其自己的首選項，例如，當我在Chrome上嘗試時，邊距設置為8 px，以覆蓋瀏覽器設置，您需要將此添加到css中：
html, body, h1, h2, h3, h4, h5, h6, div {
padding: 0;
border: 0;
margin: 0;
}
解決方案2
1 2016-02-09 06:51:53
這是因為您的h1標簽采用了保證金。
materialize.min.css將h1標簽設置為margin: 2.1rem 0 1.68rem;
使用以下方法解決您的問題。
h1 {
margin: 0;
padding: 0;
}
解決方案3
1 2016-02-09 06:52:30
添加CSS重置，如下所示：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
如何刪除頁面頂部的空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.