espacio inexplicable por encima de botón dentro DIV

Prefacio: He leído un montón de artículos acerca de las imágenes dentro de un div que tiene un extraño espacio que les rodea, etc.espacio inexplicable por encima de botón dentro DIV

Ejemplo # 1: Unwanted padding-bottom of a div
Ejemplo # 2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Ejemplo n. ° 3: cannot eliminate space between 2 horizontal divs inside containing div

Sus problemas parecen similares pero no idénticos a los míos. En este documento de muestra, el borde, el relleno, el contorno, etc. están configurados en cero. Sin embargo, tanto Opera como Firefox representan un píxel adicional en la parte superior del div. El tercero puede engañar una manera alrededor de este espacio pero nadie parece responder por qué está allí.

Editar: He leído MUCHOS artículos que están tentadoramente cerca de responder a esto, pero todos parecen un poco diferentes con el problema real.

¿Qué me estoy perdiendo? Es mi primera pregunta así que sea paciente por favor :)

<!doctype html> 
<html> 
    <head> 
    <title>Anger</title> 
    <style> 
     *{ 
     cursor: default; 
     margin: 0; 
     outline: 0; 
     border: none; 
     padding: 0; 
     text-decoration: none; 
     } 
     body{ 
     background-color: #87cefa; 
     } 
     div{ 
     background-color: #ffffff; 
     } 
     button{ 
     border-radius: 9px; 
     padding: 1px 6px 2px 6px; 
     font: 14px monospace; 
     color: #ffffff; 
     background-color: #1e90ff; 
     } 
    </style> 
    <head> 
    <body> 
    <div> 
     <button>Sample Button</button> 
    </div> 
    </body> 
<html>

¿Hay alguna CSS3 que hará todo el trabajo? Este es un proyecto experimental, por lo que el último CSS3 es bienvenido.

PD: Solo me importa la renderización de Opera, aunque Firefox sería agradable de admitir con el mismo código que cumple con las normas ... ¡Gracias!

Fuente

2012-07-15 Fumbles

Cambia la altura de la línea en el div a cero.

div{ 
     background-color: #ffffff; 
     line-height:0; 
    }

jsFiddle example

Fuente

2012-07-15 18:39:57 j08691

Gracias! Eso funciona, ¿alguien sabe dónde en las especificaciones (yo las leo) este comportamiento se especifica? – Fumbles

Bueno, la altura de la línea está relacionada con el tamaño de la fuente, que obviamente puede ser diferente en todos los sistemas operativos. Puede leer más en https://developer.mozilla.org/en/CSS/line-height y ver que la altura de línea predeterminada es aproximadamente 1.2. Como no especificó ninguna regla de fuente en su CSS, la altura de línea predeterminada inició y restableció a cero cosas fijas. – j08691

@Fumbles - secciones de especificaciones de CSS 2.1 [10.6] (http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) y [10.8] (http://www.w3.org/TR/CSS2 /visudet.html#line-height). Pero no es una lectura fácil. – Alohci

Ajuste vertical-align al principio de la página con el botón. Eso lo arreglará.

Fuente

2012-07-15 18:42:44 banzomaikaka

aha que también funciona, ¿hay alguna "solución" que pueda agregar a mi restablecimiento de estilo para todos los elementos que también lo curen? Si no, elegiré entre las respuestas que funcionan, y solo lo usaré cuando note este problema :) – Fumbles

Argumentaría que esto es mejor, ya que no estropearás la altura de línea del div (agrega otro elemento en línea para el div y se verá raro. ¿Por qué? Su altura de línea será 0. Sin embargo, puede anular, pero en realidad es un trabajo innecesario). En mi hoja de estilo de restablecimiento, creo que tengo algo así como button, input, textarea {vertical-align: top; /*entre otras cosas*/}. Desarrollaré mi respuesta para explicar por qué funciona la alineación vertical y por qué la necesitas en primer lugar. Dame 10 minutos. – banzomaikaka

Genial, solo desearía que ese comportamiento raro fuera eliminado de las especificaciones, ya que parece que no sirve de nada jajaja – Fumbles

espacio inexplicable por encima de botón dentro DIV

Respuesta

Cuestiones relacionadas