html - traduccion - tamaño de linea css

Elementos en línea y altura de línea

Question

Estoy confundido acerca line-height de inline en elementos en inline . He estado buscando:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Pero no estoy seguro si entiendo. Sé que puedo hacer que la altura sea exacta si convierto a bloque con pantalla: bloque en línea. Pero lo que trato de entender es cómo funcionan los elementos en línea altura-línea. Aquí están las preguntas:

• Tengo un font-size: 15px texto font-size: 15px 18px , pero si veo las herramientas de desarrollo del navegador, son 18px . ¿Por qué? ¿El font-size es aproximado? o no mide los altibajos?

• ¿Por qué el color de fondo del elemento en inline no tiene la misma height que la height de la line-height ? La line-height de inline en los elementos en inline mide el espacio del cuadro de línea, es decir, el espacio de la línea arriba y abajo, pero no el elemento en inline sí. ¿Esa es la explicación?

Aquí un ejemplo para jugar.

CSS:

#block-element {
  font-family: ''verdana'', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: ''verdana'', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}

<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px real
  </a>
</div>

Answer 1

Esto puede ser confuso porque en el modelo de formato en línea hay diferentes alturas.

Altura de una caja en línea

Un elemento con display: inline genera un cuadro en línea :

Un cuadro en línea es uno que está a nivel de línea y cuyos contenidos participan en su contexto de formato en línea. Un elemento no reemplazado con un valor de display en inline genera un cuadro en línea.

Y line-height determina la altura de ese cuadro :

La altura del recuadro en línea encierra todos los glifos y sus mitades en cada lado y, por lo tanto, es exactamente ''altura de línea''

Por lo tanto, su caja es, de hecho, 15px altura.

Altura de un cuadro de línea

También hay cuadros de línea :

En un contexto de formato en línea, los cuadros se colocan horizontalmente, uno tras otro, comenzando en la parte superior de un bloque contenedor. Los márgenes horizontales, los bordes y el relleno se respetan entre estos cuadros. Los cuadros pueden estar alineados verticalmente de diferentes maneras: sus partes inferiores o superiores pueden estar alineadas, o las líneas de base de texto dentro de ellas pueden estar alineadas. El área rectangular que contiene los cuadros que forman una línea se llama cuadro de línea .

La altura de un cuadro de línea está determinada por las reglas dadas en la sección sobre cálculos de altura de línea .

En caso de que un cuadro de línea solo contenga cuadros en línea no reemplazados con la misma line-height y vertical-align , esas reglas dicen que la altura del cuadro de línea estará dada por line-height .

Entonces, en su caso, esto también es 15px .

Altura del área de contenido de un cuadro en línea

Sin embargo, las herramientas de desarrollador de su navegador dicen 18px . Eso es porque esos 18px son la altura del área de contenido. También es esta área de contenido (junto con los rellenos) que está pintada con el fondo verde.

Tenga en cuenta que esos 18px pueden variar porque http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced :

La altura del área de contenido debe basarse en la fuente, pero esta especificación no especifica cómo. Un UA puede, por ejemplo, usar el em-box o el máximo ascendente y descendente de la fuente. (El último garantizaría que los glifos con partes encima o debajo del cuadro de em todavía caigan dentro del área de contenido, pero conduce a cuadros de diferentes tamaños para diferentes fuentes; el primero garantizaría que los autores puedan controlar el estilo de fondo en relación con la ''altura de línea'' , pero hace que los glifos pinten fuera de su área de contenido).

Si un UA implementa la primera sugerencia, la altura del contenido estará dada por font-size , que determina el cuadro de em. Esto sería lo que esperaba, con el cuadro verde de 15px altura.

Sin embargo, la mayoría de las UA no parecen hacer eso. Eso significa que, probablemente, la altura será la altura del glifo más alto en la font-family font-size y font-size utilizado.

Pero usar un valor de font-size de 15px no significa que el glifo más alto tendrá 15px alto también. Eso depende de la fuente. Esto es algo análogo a lo normal , el valor inicial de line-height de line-height , que se define como

Indica a los agentes de usuario que establezcan el valor utilizado en un valor "razonable" basado en la fuente del elemento [...]. Recomendamos un valor usado para ''normal'' entre 1.0 y 1.2 .

Eso significa que, si usa font-size: 15px , una line-height "razonable" estaría entre 15px y 18px . En la fuente "Verdana", Firefox cree que lo mejor es 18px ; en el "sans-serif", usa 17px .

Answer 2

#block-element {
 font-family: ''verdana'', sans-serif;
 font-size:15px; line-height:15px;
 text-decoration: none; color:black;
 margin:0;
 background-color:grey;
}


#inline-element {
 -webkit-box-sizing: border-box;
 font-family: ''verdana'', sans-serif;
 font-size:15px; line-height:55px;
 text-decoration: none; color:black;
 margin:0;
 background-color:green;
  
  float:left;
}

<div id="block-element">
 <a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>

** y el trabajo de altura de línea en el elemento de bloque al aplicar una altura de línea de 200 px, la altura de su elemento será de 200 px y su elemento interno a mitad de una altura de 200 px

el elemento en línea no puede leer la altura y el relleno en la parte superior e inferior, necesitamos leer estas propiedades, debemos aplicar cualquier propiedad de diseño como flotante, pantalla: bloque en línea o bloque

solo los elementos de bloque son propiedades de lectura de altura de línea y relleno en su código si agrega float: left o disply: propiedad de block css agregue altura de línea y el relleno funcionará

en su código en agregar solo la propiedad haslayout, su elemento en línea funciona como un elemento de bloque