Getting extra white space before and after the main tag

Question

I have created one html and one css file.

.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>

Nothing fancy I am doing here, and still what I see is the following

The problem I am facing is the extra white space that appears before and after the main tag. I have not given any margin to main tag.

Can someone help me on what basics I lack and why that space is appearing ?

Because your articles have 16px margin. So either change it to 0 all around or change it to have no top and bottom margin, or perhaps even no top margin on :first and not bottom on :last — Yeronimo, May 26 '23 at 11:25

score 0 · Answer 1 · answered May 26 '23 at 16:10

Instead of using margin on the main tag you can use padding.

.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 {
  margin: 0px;
  padding: 15px 0px;
  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>

Getting extra white space before and after the main tag

1 Answers1