utilizacion - etiquetas de marco html

¿Quitar los marcos flotantes adicionales que rodean el espacio en blanco?

Question

Estoy usando iframes en mi página y me he topado con un problema extraño. Configuré el iframe css como tal

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

Sin embargo, aún hay espacios en blanco alrededor del iframe. Lo probé tanto en Chrome como en Firefox, y es lo mismo. Busqué y no pude encontrar nada. Este espacio en blanco tampoco aparece en la consola de Chrome. Además, ya tengo el siguiente CSS:

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

JSFiddle: here

Answer 1

Cuando está utilizando un elemento en línea, el espacio en blanco puede ser de la "línea" de la que el elemento es parte (es decir, el espacio debajo de la línea base). La solución entonces es agregar esto a su elemento padre.

line-height: 0;

Answer 2

Es un poco difícil de resolver sin su contenido html, pero pruébelo:

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%;
}

Agregar el !important forzará el estilo, porque creo que tus estilos se sobrescriben entre sí.

Answer 3

Habiendo visto tu violín tu problema es porque estás usando display:inline-block . Esto toma espacio en blanco en su html en la cuenta. display:inline-block es notorio por ser difícil y tiene un soporte de navegador dudoso.

Opción 1: Intente eliminar el espacio en blanco en su html, a veces puede ordenar el problema.

Opción 2: Usar una propiedad de visualización diferente como display:block definitivamente resolverá el problema. Ejemplo en vivo: http://jsfiddle.net/mM6AB/3/

Answer 4

Pruebe html, body {margin:0px;}

Answer 5

Tal vez ese espacio en blanco es en realidad el margen exterior del documento cargado en el. Pruebe diseñar el documento cargado (estilo CSS de la página de origen ) con:

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

citado de .com Here

Answer 6

Tuve el mismo problema y lo solucioné flotando el elemento de marco

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

Answer 7

intente usar un div con overflow: hidden; rodeando el <iframe> , como

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

iframe { display:block; }

iframe es un elemento en línea