CODEWITHSUNDEEP
htmlcss
Hobbyist
Hobbyist

Reputation: 16182

Can't remove margin beneath iframe

I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.

http://codepen.io/anon/pen/yyjaVJ

Links to codepen must be accompanied by code, 
but it's all on codepen, considering there's not much.

Upvotes: 3

Views: 79

Answers (2)

Brian
Brian

Reputation: 127

You can still use what you have, if you edit your CSS and change this code:

#body_wrapper footer {
    margin-top: -6px;
}

Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.

Upvotes: -1

Josh Crozier
Josh Crozier

Reputation: 240888

It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.

You could either change the display of the iframe element to block: (example)

iframe {
  display: block;
}

..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)

iframe {
  vertical-align: top;
}

Upvotes: 3

Related Questions