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

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

9 39
html css iframe whitespace removing-whitespace

9 ответов:

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

Вариант 1: Попробуйте удалить пробелы в вашем html-файле, чтобы иногда решить проблему.

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

59

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

line-height: 0;
14
iframe { display:block; }

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

7

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

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

Процитировано из stackoverflow.com Здесь

2

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

iframe {

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

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

1

Попробуйте использовать 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>
1

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

0

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

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

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

0