0

I am newbie with html css and here is my question.

I tried to code a sample page as this page https://www.w3schools.com/w3css/tryw3css_templates_band.htm#

When I use tool to see THE BAND, it show that margin is 10px 0px And when I use tool to see We love music, it show that margin is 15px 0px

Here is my code at index.html

    <div id="content">
        <div class="content-section">
            <h2 class="section-heading">THE BAND</h2>
            <p class="section-sub-heading">We love music</p>
            <p class="about-text">We have created </p>
        </div>
    </div>

They said to me that I can use this code to make THE BAND and We love music to be far apart 25 px by this code at style.css

#content .section-heading {
font-size: 30px;
font-weight: 500;
letter-spacing: 4px;
}

#content .section-sub-heading {
font-size: 15px;
margin-top: 25px;
}

But my question is, why not use margin-bottom at #content .section-heading ? Because it show that margin of THE BAND is 15px, I code like this

#content .section-heading {
font-size: 30px;
font-weight: 500;
letter-spacing: 4px;
margin-bottom: 15px;
}

#content .section-sub-heading {
font-size: 15px;
margin-top: 10px;
}

My purpose is, THE BAND's margin is 15px and We love music is 10px, but when I code like this, they overlapped ?

Could you please help me to solve this problem ? Thank you very much for your time.

nguyencuc2286
  • 107
  • 1
  • 8
  • The reason for collapsing margins is for the more general mixing of headers and paragraphs. Generally, if you really want non-collapsing margins, use padding instead. – Ouroborus Nov 15 '21 at 03:51

1 Answers1

0

Instead of using margin-top: 10px, you could replace it with padding-top: 10px or just use margin-bottom: 25px; it would still give the same result.

Rhys V
  • 1
  • 1