如何去除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元素之間的空格？

回答

相關問題