Удалить лишние пространственные окружения iframe?

Я использую iframes на своей странице и наткнулся на странную проблему. Я установил iframe css таким образом

iframe {
    margin: none;
    padding: none;
    background: blue; /* this is just to make the frames easier to see */
    border: none;
}

Однако все еще есть пробелы, окружающие iframe. Я тестировал его как в Chrome, так и в Firefox, и он тоже. Я искал вокруг, и я ничего не мог найти. Этот пробел также не отображается в консоли Chrome. Кроме того, у меня уже есть следующий CSS:

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}

JSFiddle: здесь

Ответы

Ответ 1

Только увидев вашу проблему, проблема заключается в том, что вы используете display:inline-block. Это учитывает пробелы в вашем html. display:inline-block известен тем, что он сложный и имеет изворотливую поддержку браузера.

Вариант 1: Попробуйте удалить пустое место в html иногда может решить проблему.

Вариант 2: Использование другого свойства отображения, такого как display:block, определенно будет сортировать проблему. Пример в реальном времени: http://jsfiddle.net/mM6AB/3/

Ответ 2

Когда вы используете встроенный элемент, пробел может быть от "строки", элемент которого является частью (т.е. пространства ниже базовой линии). Тогда решение должно добавить это к его родительскому элементу.

line-height: 0;

Ответ 3

iframe { display:block; }

iframe является встроенным элементом

Ответ 4

Возможно, что пробелы на самом деле являются внешним полем документа, загруженного в. Попробуйте стилизовать загруженный документ (CSS-стиль исходная страница) с помощью

html, body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

цитируется из stackoverflow.com здесь

Ответ 5

У меня была та же проблема, и я исправил ее, плавая элемент фрейма

iframe {

    margin: none;
    padding: none;
    border: none;
    line-height: 0;
    float: left; 
}

Ответ 6

попробуйте использовать div с overflow: hidden;, окружающим <iframe>, например

<div style="height: 29px; overflow: hidden;">
   <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30">
      <p>Your browser does not support iframes.</p>
   </iframe>
</div>

Ответ 7

Попробуйте html, body {margin:0px;}

Ответ 8

Бит трудно решить без вашего содержимого html, но попробуйте:

iframe {
    margin: 0px !important;
    padding: 0px !important;
    background: blue; /* this is just to make the frames easier to see */
    border: 0px !important;
}

html, body {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    width: 100%;
    height: 100%;
}

Добавление !important приведет к стилю, потому что я предполагаю, что ваши стили переписывают друг друга.