保证金不起作用

我正在设置margin: 0 0 30px 0;但它不起作用。我仍然可以在我的header元素的各个方面看到差距。保证金不起作用

这里有一个demo：

header { 
 
    float: left; 
 
    margin: 0px 0px 30px 0px; 
 
    width: 100%; 
 
} 
 

 
#logo { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    font-family: 'Amatic SC', cursive; 
 
    letter-spacing: .1em; 
 
    margin: 15px 0; 
 
    font-size: 1.75em; 
 
    font-weight: 900; 
 
    line-height: .8em; 
 
} 
 

 
h2 { 
 
    font-size: .8em; 
 
    margin: -5px 0 0; 
 
    font-weight: 500; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    margin: 20px 0 0; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0 0px; 
 
    padding: 0; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    font-size: 10px; 
 
} 
 

 
nav a { 
 
    font-weight: 800; 
 
    padding: 15px 10px; 
 
} 
 

 

 
/************************** COLORS ************************/ 
 

 
body { 
 
    background-color: #343456; 
 
    color: #999; 
 
} 
 

 
header { 
 
    background: #6ab47b; 
 
    border-color: #599a68; 
 
} 
 

 
nav { 
 
    background: #599a68; 
 
} 
 

 
h1, 
 
h2 { 
 
    color: #fff; 
 
} 
 

 
a { 
 
    color: #6ab47b; 
 
} 
 

 
nav a, 
 
nav a:visited { 
 
    color: #fff; 
 
} 
 

 
nav a.selected, 
 
nav a:hover { 
 
    color: #32673f; 
 
}

<body> 
 
    <header> 
 
    <a href="treeHouse.html" id="logo"> 
 
     <h1>Hovhannes Mkoyan</h1> 
 
     <h2>Designer</h2> 
 
    </a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="treeHouse.html" class="selected">Portfolio</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body>

当我设置margin: -10px 0px 30px 0px;，则top间隙消失，但我怎么能得到来自各方面的摆脱它？

来源

2016-01-13 Hovhannes Mkoyan

尝试增加身体'{保证金：0;}'删除默认的保证金 - https：//开头的jsfiddle。net/67rcd7rh/ – Anonymous

确保关闭你的'nav'标签，与保证金问题无关，只是说@Anonymous也是正确的。 –

使用'* { margin：0; 填充：0;如下面的答案所述。它将删除默认的浏览器边距和填充。 – ketan

要取出填充周围的头，只需添加margin:0到通用选择器（*），像这样：

注意将这个在你的CSS文件的最顶端，1号线

* { 
    margin:0; 
    padding:0; 
}

这将删除所有元素上的所有填充和所有边距，除非您告诉元素样式给它一个填充或边距。

Updated Fiddle

希望这有助于！

来源

2016-01-13 08:24:03 Simplicity

该网站的身体有一个默认8px缘周围的一切，你可以通过给body标签或一个小丑*（或两者）的CSS样式margin: 0;删除此。

*, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    float: left; 
 
    margin: 0px 0px 30px 0px; 
 
    width: 100%; 
 
} 
 
#logo { 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
h1 { 
 
    font-family: 'Amatic SC', cursive; 
 
    letter-spacing: .1em; 
 
    margin: 15px 0; 
 
    font-size: 1.75em; 
 
    font-weight: 900; 
 
    line-height: .8em; 
 
} 
 
h2 { 
 
    font-size: .8em; 
 
    margin: -5px 0 0; 
 
    font-weight: 500; 
 
} 
 
nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    margin: 20px 0 0; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    margin: 0 0px; 
 
    padding: 0; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    font-size: 10px; 
 
} 
 
nav a { 
 
    font-weight: 800; 
 
    padding: 15px 10px; 
 
} 
 
/************************** COLORS ************************/ 
 

 
body { 
 
    background-color: #343456; 
 
    color: #999; 
 
} 
 
header { 
 
    background: #6ab47b; 
 
    border-color: #599a68; 
 
} 
 
nav { 
 
    background: #599a68; 
 
} 
 
h1, 
 
h2 { 
 
    color: #fff; 
 
} 
 
a { 
 
    color: #6ab47b; 
 
} 
 
nav a, 
 
nav a:visited { 
 
    color: #fff; 
 
} 
 
nav a.selected, 
 
nav a:hover { 
 
    color: #32673f; 
 
}

<body> 
 
    <header> 
 
    <a href="treeHouse.html" id="logo"> 
 
     <h1>Hovhannes Mkoyan</h1> 
 
     <h2>Designer</h2> 
 
    </a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="treeHouse.html" class="selected">Portfolio</a> 
 
     </li> 
 
     <li><a href="about.html">About</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body>

来源

2016-01-13 08:26:08 Thaillie

浏览器居然把默认样式上的一些元素。这在不同情况下既有用又令人讨厌。其所谓的user agent stylesheet

所以，你必须使用一个master stylesheet以清除默认浏览器的性能。

这里有一些默认HTML浏览器属性

体--->margin:8px

p ------->margin-top:5px , margin-bottom:4px

H1，H2，H3 H6 ..... --->margin 20 to 25px

Evenn ul，li，a，image，input，button都有一些默认的浏览器样式表。

要避免或覆盖这些属性，我们必须使用主样式表。我们把它作为复位CSS，它看起来像这样

*{ 
    margin:0; 
    padding:0 
}

}

来源

2016-01-13 09:21:13

保证金不起作用

回答

相关问题