how to remove white space on the top
Question
I am trying to create top jumbotron above the navbar in materializecss Here is my code for 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>
and here is code for includes.css
.top {
height: 170px;
background-color: #ef9a9a;
margin: 0px;
}
unfortunately there appears white space on extreme top and it doesn't goes away even with margin: 0px; or margin-top:0px;
so any idea how to remove it?
3 answers
solution1
3 ACCPTED 2016-02-09 06:43:48
Try this :
<!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>
Explaination :
Each browser has it's own preferences, for example when I tried on Chrome, the margin was set to 8 px, to override the browser setting, you need to add this into your css :
html, body, h1, h2, h3, h4, h5, h6, div {
padding: 0;
border: 0;
margin: 0;
}
solution2
1 2016-02-09 06:51:53
It is because your h1 tag taking margin.
materialize.min.css set h1 tag as margin: 2.1rem 0 1.68rem;
Use following solve your issue.
h1 {
margin: 0;
padding: 0;
}
solution3
1 2016-02-09 06:52:30
Add a css reset like this:
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.