如何去除body标签中header和next div元素之间的空格？

我试过所有在页眉和div类上都有margin-bottom和margin-top的东西，但没有任何反应。我想删除标题和下一个元素之间的空间，但要保持它们之间的白色边框。如何去除body标签中header和next div元素之间的空格？

这里是HTML和CSS充满的一部分：

img { 
 
    width: 200px; 
 
    border-radius: 15%; 
 
    border: 4px solid white; 
 
    margin-top: 20px; 
 
} 
 
body { 
 
    text-align: center; 
 
    background-color: #839F93; 
 
    font-family: helvetica, sans-serif; 
 
} 
 
ul { 
 
    padding: 15px; 
 
    list-style: none; 
 
    background: rgba(255, 255, 255, .5); 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 0 10px 0 10px; 
 
} 
 
a { 
 
    color: black; 
 
} 
 
header { 
 
    background: #385044; 
 
    color: white; 
 
    border-bottom: 2px solid white; 
 
} 
 
h1 { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
iframe { 
 
    border-radius: 30px; 
 
    border: white 2px solid; 
 
}

<body> 
 
    <header> 
 
    <img src="picture-of-me.jpg" alt="Picture of Ivan"> 
 
    <h1>Ivan's site</h1> 
 
    <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 
    <div class="vangelis-chariots"> 
 
    <h2>Vangelis - Chariots of fire</h2> 
 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TYJzcUvS_NU" frameborder="0" allowfullscreen></iframe> 
 
    <p>Click to play video and listen to music</p> 
 
    </div>

来源

2015-12-01 Ivan Kusakovic

感谢编辑。 –

尝试：

header ul { 
    margin-bottom: 0; 
}

see here

来源

2015-12-01 21:42:06 Keammoort

非常感谢！我忘了:)我是初学者。 –

如果我将margin设置为0并且标头ul和ul只有什么不同？ –

每个块元素都有它的宽度，高度，边距和填充。元素的高度是其内容的高度加上填充。如果你的列表中有一些底部边距设置，那么头部元素将扩展它的高度，所以整个ul元素（带有边距）适合它。看看CSS模型http://www.w3schools.com/css/css_boxmodel.asp https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model – Keammoort

只需添加margin:0;到ul在标题中将覆盖应用于ul s的默认顶部/底部边距。

ul { 
    margin:0; 
    padding: 15px; 
    list-style: none; 
    background: rgba(255,255,255, .5); 
}

JSFiddle

来源

2015-12-01 21:42:19 APAD1

非常感谢:)显然，我没有尝试过！ :) –

从<ul>取出保证金：

img { 
 
    width: 200px; 
 
    border-radius: 15%; 
 
    border: 4px solid white; 
 
    margin-top: 20px; 
 
} 
 
body { 
 
    text-align: center; 
 
    background-color: #839F93; 
 
    font-family: helvetica, sans-serif; 
 
} 
 
ul { 
 
    padding: 15px; 
 
    list-style: none; 
 
    background: rgba(255, 255, 255, .5); 
 
    margin: 0; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 0 10px 0 10px; 
 
} 
 
a { 
 
    color: black; 
 
} 
 
header { 
 
    background: #385044; 
 
    color: white; 
 
    border-bottom: 2px solid white; 
 
} 
 
h1 { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
iframe { 
 
    border-radius: 30px; 
 
    border: white 2px solid; 
 
}

<header> 
 
    <img src="picture-of-me.jpg" alt="Picture of Ivan"> 
 
    <h1>Ivan's site</h1> 
 
    <ul> 
 
    <li><a href="index.html">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</header> 
 
<div class="vangelis-chariots"> 
 
    <h2>Vangelis - Chariots of fire</h2> 
 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TYJzcUvS_NU" frameborder="0" allowfullscreen></iframe> 
 
    <p>Click to play video and listen to music</p> 
 
</div>

来源

2015-12-01 21:42:56 j08691

如何去除body标签中header和next div元素之间的空格？

回答

相关问题