Удалить лишние пробелы, окружающие фреймы?

Question

Я использую 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: здесь

Answer 1

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

Опция 1: Попытка удалить пробел в html иногда может решить проблему.

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

Answer 2

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

line-height: 0;

Answer 3

iframe { display:block; }

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

Answer 4

У меня была такая же проблема, и я исправил ее, добавив элемент frame

iframe {

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

Answer 5

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

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

цитата из stackoverflow.com Здесь

Answer 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>

Answer 7

Немного трудно решить без содержания 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 приведет к форсированию стиля, так как я предполагаю, что ваши стили перезаписывают друг друга.

Answer 8

Поскольку ни один из приведенных ответов не дал мне решения (я также наткнулся на странную проблему с полями при реализации iFrame), я обнаружил, что это работает нормально:

<iframe frameborder="0" marginwidth="0" marginheight="0" src="/something"></iframe>

marginwidth и marginheight не являются действительными / официально поддерживаемыми HTML5-тегами, но они отлично работают в моих тестах ...

Answer 9

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