как удалить пустое пространство на верхних

Я пытаюсь создать верхний JumboTron над навигационной панелью в 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;

поэтому любая идея, как его удалить?

источник

2016-02-09 Sykox

Попробуйте это:

<!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:
Каждый браузер имеет свои собственные предпочтения, например, когда я пытался на Chrome, запас был установлен на 8 пикселей, чтобы переопределить настройки браузера, вам нужно добавьте это в свой css:

html, body, h1, h2, h3, h4, h5, h6, div { 
     padding: 0; 
     border: 0; 
     margin: 0; 
    }

источник

2016-02-09 06:43:48 budiantoip

Работал как шарм ... Большое вам спасибо ... @budiantoip – Sykox

вы радушны :) – budiantoip

@budiantoip, не могли бы вы объяснить, почему мой ответ не сработал? –

Это потому, что ваш h1-тег занимает край.

materialize.min.css набор h1 бирку margin: 2.1rem 0 1.68rem;

Используйте следующие решить вашу проблему.

h1 { 
    margin: 0; 
    padding: 0; 
}

Working Fiddle

источник

2016-02-09 06:51:53 ketan

Oh! Абсолютно ... Это работало ... Спасибо .... – Sykox

Ницца [ketan] (http://stackoverflow.com/users/1213296/ketan) – budiantoip

Добавить сброс 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; 
}

источник

2016-02-09 06:52:30 rhavendc

не конфликтует, если я хочу добавить дополнение к некоторому элементу позже ... или тогда я должен использовать! important; – Sykox

Это не так. Он просто инициализирует новую палитру. – rhavendc

как удалить пустое пространство на верхних

ответ

Смежные вопросы