Iframe creates extra space below

Question

Why does an iframe add extra space under its element? Look at this weird behavior:

Answer 1

here is another answer please check it ...

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}