utiliza - ¿Por qué el DOCTYPE HTML5 se mete con mi relleno?
para qué se utiliza la declaración<! doctype html (8)
Es porque DOCTYPE cambia el modo de renderizado al modo de cumplimiento de estándares. Específicamente, esto significa que está usando el W3C Box Model ahora que calcula el ancho / alto para los elementos del bloque de forma diferente al modo peculiar.
Tengo una página html5 con una barra de navegación. Completamente codificado por cero. Recientemente agregué un tipo de documento al artículo, y ahora estoy obteniendo espacio adicional debajo de mi barra de navegación. Si elimino la declaración de tipo de documento, vuelve a la normalidad. He restablecido por completo el relleno, los márgenes, etc. en todo, y lo reduje a una pequeña cantidad de código que ilustra el problema.
La página se puede ver en http://hackthetruth.org/webdesign/broken
¿Alguien sabe por qué declarar el doctype está jugando con la altura de un div?
Guau. @matt tiene razón (no en este caso) y eso es conocimiento general, pero estás equivocado.
mira tu @ css, tienes
pagetab {background-color: # ff2d00; relleno: 0px 4px; margen: 0; display: inline-block;}
pagetab ul {list-style: none; margen: 0px; relleno: 0px 4px; bloqueo de pantalla;}
para .....
entonces esa segunda declaración es sobre ul anidado que ocurre en #pagetab. usted no tiene ninguno de esos.
Saqué el ul de la declaración para que estén en el elemento correcto. ahora tu CSS tiene 2 estilos que coinciden para ambos (y también se llaman en tu selector universal (fyi, que va por encima de tu cuerpo {} declaración)) entonces eso es 3 estilos ... exagerado amigo. además, los que no coinciden, lo configuran para mostrar: bloque en línea y luego restablecerlo para bloquear ... estoy perdido en esta lógica.
TOME su ejemplo. cambiar dos estilos de pagetab a este
pagetab {
background-color: #ff2d00;
padding: 0px 4px;
margin: 0;
}
pagetab {
list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;
}
guardarlo ahora quítelo, guárdelo como # 2. en FF3.6 en 7 son lo mismo.
si usa los validadores que se proporcionan específicamente para resolver / prevenir problemas como este, así como las herramientas de qa (específicamente, aquí estoy hablando del bookmarklet de selectores de dust-me), usted resolvería esto en poco tiempo.
volver a los estándares web, gen ed css: * {} es universal, por lo que siempre que otra declaración no anule la especificidad de *, siempre funcionará. en inglés, si declara * {margin: 0; relleno: 0; borde: ninguno} en la parte superior de la página, no tiene que poner el margen: 0; relleno: 0; en cada elemento individual. tu ya lo tienes.
estándares web, te salvarán la vida.
Mate tiene 2 etiquetas </div> en esa página. En las líneas 32 y 34. Eliminar y volver a intentar. A ver si eso lo arregla.
Nunca he usado display: inline-block debido a los problemas de IE7, así que no estoy familiarizado con sus peculiaridades. Parece que no es necesario aplicarlo a ul#pagetab en su situación, ya que no está rodeado por elementos en línea. Simplemente lo convertiría en un elemento de bloque normal. Además, dado que contiene elementos flotantes que no necesitan flotar junto a algunos elementos en línea, simplemente le daría a ul#pagetab una altura real a través de display: block; overflow: hidden; display: block; overflow: hidden; .
Esto parece resolver todos sus problemas (que no puedo explicar en detalle) y proporciona estilos estilísticamente más apropiados.
Tuve el mismo problema al actualizar un sitio web XHTML4 a HTML5. Tenía muchos de estos:
<a><img></a>
Que terminó con el relleno extra mágico alrededor de las imágenes. Para mí, la solución fue simple: agregue este css:
img { vertical-align: top; }
Tuve el mismo problema con uno de mis sitios. Encontré esta respuesta here :
"Con un tipo de documento HTML5, las imágenes reciben lo que parece ser el atributo de altura de línea que normalmente recibe el texto, y así obtienes un" margen "debajo de ellas. Puedes configurarlas para que muestren: bloque o altura de línea: 0, aunque No he probado lo suficiente para estar seguro de que es una buena solución ".
Apliqué la line-height:0 a la <div> que contenía las imágenes de navegación. Me hizo el truco.
prueba este:
css:
html * { margin:0; padding:0; }
Esta es una consideración interesante y sutil, pero importante al usar inline-block .
La respuesta corta es: establecer vertical-align en su ul a cualquier cosa que no sea la baseline de baseline .
La razón por la que esto funciona es porque los bloques en línea se consideran texto y, por lo tanto, están sujetos a propiedades basadas en texto, como altura de línea y alineación vertical.
La respuesta más larga es la siguiente:
La especificación CSS3 entra en cierta profundidad (tal vez confusa) sobre cómo funciona el modelo de caja. Aquí hay una cita de la especificación del cuadro de CSS3, en la que he resaltado la parte que es relevante para este problema:
9.5. ''Inline-block'' o elementos flotantes no reemplazados
... El valor utilizado de la
heightes el valor calculado, a menos que sea ''automático'', cuando el valor utilizado se define por "Alturas ''automáticas'' para las raíces de flujo."
Veamos cuáles son las alturas automáticas para las raíces de flujo:
9.10. Alturas ''automáticas'' para raíces de flujo
En ciertos casos (ver las secciones anteriores), la altura de un elemento se calcula de la siguiente manera:
- Si solo tiene hijos en el nivel en línea, la altura es la distancia entre la parte superior del recuadro de la línea superior y la parte inferior del recuadro de la línea inferior.
...
Las partes de la caja de líneas son de interés. Lo que esto implica efectivamente es que cualquier cosa configurada para mostrarse como bloque en línea está sujeta a los diseños de cuadro implícitos que utiliza el texto sin formato.
Es posible que pueda adivinar ahora por qué la configuración vertical-align soluciona este problema, pero sigamos rastreando este problema a través de la especificación.
La definición de line-box es un poco deslucida, y el ejemplo en la sección 4.2 es solo marginalmente útil.
Regresemos a la especificación CSS 2.1, que hace un trabajo mucho mejor al explicar los cuadros de líneas :
El área rectangular que contiene los cuadros que forman una línea se llama un recuadro de línea ... [su altura] está determinada por las reglas dadas en la sección de cálculos de altura de línea.
A partir de esta explicación, vemos que las propiedades de line-height y vertical-align tienen algo que ver con la forma en que se calculan las alturas (de los recuadros de línea, así elementos de bloque en línea). La lectura de los cálculos de altura de línea casi deja en claro:
... En caso de que [los cuadros de líneas] estén alineados ''arriba'' o ''abajo'', deben estar alineados para minimizar la altura del cuadro de línea.
Por lo tanto, la altura de nuestro elemento de bloque en línea se ve afectada por los cálculos de altura de la línea de líneas implícitas, que a su vez están sujetos a estos cálculos de alineación vertical.
Entonces, parece que cuando no usamos la línea base como una alineación vertical para un bloque en línea, el cuadro de línea implícita de la caja se reducirá al tamaño más pequeño que pueda.
¿Confuso? ...Sí. Solo regrese a la respuesta más corta :)