html - etiqueta - svg text mdn
Margen no esencial en el elemento svg (3)
Tengo un documento muy simple (ver también JSFiddle ):
<style>
html, body, svg, div {
margin: 0;
padding: 0;
border: 0;
}
</style>
<body>
<svg id="foo"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width: 768px; height: 1004px;">
</svg>
</body>
Por alguna razón, el elemento svg obtiene un margen inferior de 3px o 4px (es decir, el elemento del body obtiene una altura de 1007px, 1008px o incluso 1009px; el propio margen de svg es 0 cuando se inspecciona con las herramientas de depuración del navegador).
Si reemplazo el svg con un div , el margen espurio desaparece. El comportamiento es consistente en Opera 12, Chrome 33, Firefox 26 e Internet Explorer 11, por lo que estoy seguro de que el comportamiento cumple con el diseño y los estándares, simplemente no lo entiendo .
Este es un problema común con los elementos en inline . Para resolver esto, simplemente agregue vertical-align:top .
#foo {
background: #fff;
vertical-align:top;
}
Vale la pena señalar que el valor predeterminado para la propiedad de vertical-align es la baseline . Esto explica el comportamiento por defecto. Valores como top , middle y bottom corrigen la alineación.
Alternativamente, podrías hacer el nivel de block elementos. (example)
Mi documento tenía un solo elemento svg que cambiaba de tamaño con la ventana. Utilicé desbordamiento de CSS : oculto para evitar que aparezcan barras de desplazamiento. ES DECIR:
body {
overflow: hidden;
}
Tuve un problema relacionado donde tuve un div que contiene un SVG:
<div id=contents>
<svg exported from illustrator>
</div>
y había márgenes gigantes arriba y abajo del SVG en el DIV, incluso con alineación vertical: arriba en el DIV y pantalla: bloque en el SVG.
Había establecido "ancho: 100%" para que los SVG hicieran que llenaran la página.
La solución fue establecer "altura: 100%" para los SVG . Ya se estaban mostrando a la altura correcta, pero al agregar esto se eliminaron los márgenes extraños.
Me encantaría saber cómo y por qué funcionó esto.