此问题已在此处有答案：
CSS margin terror; Margin adds space outside parent element [duplicate]（7个回答）
3天前关闭。
我创建了一个HTML和一个CSS文件。
.theme1 {
--headerBackground: antiquewhite;
--mainBackground: white;
--footerBackground: darkgrey;
--newsBoxBroder: darkgrey;
--newsTitleBorder: darkcyan;
--textColor: black;
}
.theme2 {
--headerBackground: lightblue;
--mainBackground: lightcyan;
--footerBackground: darkseagreen;
--newsBoxBroder: darkseagreen;
--newsTitleBorder: lemonchiffon;
--textColor: red;
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
header,
footer {
text-align: center;
}
header {
padding: 16px;
background-color: var(--headerBackground);
}
main {
background-color: var(--mainBackground);
}
footer {
height: 120px;
background-color: var(--footerBackground);
}
article.newsBox {
padding: 1rem;
margin: 16px;
border: 1px solid var(--newsBoxBroder);
}
article.newsBox h3.newsTitle {
padding-bottom: 1rem;
border-bottom: 1px solid var(--newsTitleBorder);
color: var(--textColor);
}
article.newsBox div.newsShortDescription {
padding-top: 1rem;
}<body class="theme2">
<header>
<h3>My news portal</h3>
</header>
<main>
<article class="newsBox">
<h3 class="newsTitle">
Pele, Brazil's sublimely skilled soccer star who charmed the world, dead at 82
</h3>
<div class="newsShortDescription">
Pele, the magical Brazilian soccer star who rose from barefoot poverty to become one of the greatest and best-known athletes in modern history, died at the age of 82, his daughter said on Instagram on Thursday.
</div>
</article>
<article class="newsBox">
<h3 class="newsTitle">
Covid surge in China can create havoc across the globe: Report
</h3>
<div class="newsShortDescription">
Beijing [China]: While the world is still recovering from the losses of livelihoods, damages to businesses and national economies, and healthcare disruptions, the new, deadly variant of coronavirus from China can create havoc across the globe if its spread
is not checked in time, reported The HK Post.
<br /> What is going on in China at present has stoked fears about the repetition of the horrific Covid-19 outbreak that killed millions of people across the globe.
</div>
</article>
</main>
<footer>This is footer</footer>
</body>我在这里没有做什么花哨的事情，但我看到的仍然是以下内容
我面临的问题是在主标记之前和之后出现的额外白色。我没有给main tag任何余量。
有人能帮助我了解我缺乏哪些基础知识以及为什么会出现这种空间吗？
1条答案
按热度按时间mwkjh3gx1#
你可以使用padding来代替在主标签上使用margin。