Iframe создает дополнительное пространство ниже

Почему iframe добавляет дополнительное пространство под своим элементом? Посмотрите на это странное поведение:

.border {
    background: red;
    width: 300px;
    height: 200px;
    border: 1px solid green;
    overflow: visible;
    margin: 0;
    padding: 0;
}

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

.border .lower {
    height: 100px;
    margin: 0;
    padding: 0;
    background: blue;
    opacity: 0.8;
}

<div class="border">
  <iframe src="https://example.com"></iframe>
  <div class="lower"></div>
</div>

Ответ 1

Добавьте display:block; в свой стиль Iframe следующим образом:

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    display:block; /* Add this */
}

Iframe - это встроенный фрейм, что означает, что это встроенный элемент, который, как и тег img, может иметь проблемы с пробелами. Установка display:block; превращает Iframe в блочный элемент (например, div), что устранит проблему пробелов.

Ответ 2

iframe является встроенным элементом. Это учитывает пробелы в вашем HTML. display:inline-block известен тем, что он трудный.

Добавьте display:block; в CSS для вашего iframe.

Ответ 3

Что работало для моего приложения, добавлялось overflow-y: hidden; в html iframe.

Ответ 4

Самый простой способ сделать это - просто добавить "style =" display: block "" в параметрах iframe.

например

    <iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>

Ответ 5

Элемент iframe является встроенным элементом. Одним из способов устранения проблемы с интервалом является добавление display: block, но вы также можете исправить его, просто добавив vertical-align: bottom; в элемент iframe.

Ответ 6

вот еще один ответ, пожалуйста, проверьте его...

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