CODEWITHSUNDEEP
htmlcssmarquee
Gurlakshpreet
Gurlakshpreet

Reputation: 35

My marquee tag has a bottom margin for some reason. How to remove it?

I'm making a website, and have added a marquee. It has a bottom margin for some reason, I didn't give a bottom margin. I;m sure it's the marquee since I checked by putting other tags below it, and it still had a bottom margin.

<marquee style="background-color:#bababa;width:100%;font-size:18px;font-family:'Raleway',sans-serif;font-weight:600;height:30px;" onmouseover="this.stop();" onmouseout="this.start()">Amid coronavirus concerns, Nebraska's homeschool filings jump up 21%</marquee>
    <div id="home" style="text-align:center;">
        <div class="iframe-container">
            <iframe width="100%" src="https://www.youtube.com/embed/CwJkjB7lAI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

css-

.iframe-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
       }
.iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

Upvotes: 1

Views: 774

Answers (1)

Kiran Mistry
Kiran Mistry

Reputation: 2725

your code is working fine just add display: block; your marquee tag

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<marquee style="background-color:#bababa;width:100%;font-size:18px;font-family:'Raleway',sans-serif;font-weight:600;height:30px; display: block;" onmouseover="this.stop();" onmouseout="this.start()">Amid coronavirus concerns, Nebraska's homeschool filings jump up 21%</marquee>
    <div id="home" style="text-align:center;">
        <div class="iframe-container">
            <iframe width="100%" src="https://www.youtube.com/embed/CwJkjB7lAI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

fiddle Here

Upvotes: 4

Related Questions