[英]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;
所以知道如何删除它吗?
尝试这个 :
<!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;
}
这是因为您的h1标签采用了保证金。
materialize.min.css
将h1
标签设置为margin: 2.1rem 0 1.68rem;
使用以下方法解决您的问题。
h1 {
margin: 0;
padding: 0;
}
添加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.