Search code examples
htmlcssmarquee

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%;
        }

Solution

  • 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