martes, 3 de marzo de 2015

CSS: SPAN con ancho fijo

El validador W3C de HTML muestra como error agregar un <div> dentro del elemento <td> de una tabla, sin embargo, al agregar un elemento <span> dentro del elemento <td> de una tabla no presenta ningún inconveniente para el validador. Esto provocó que en algunos segmentos de mis archivos HTML prefiera utilizar etiquetas <span> en lugar de <div>, pero me encontré con un problema al definir el ancho de un elemento <span>, esto me llevo a encontrar la siguiente solución en Internet.

Las etiquetas HTML tiene por omisión una disposición en bloque (block) o en línea (inline). Algunos ejemplos de elementos dispuestos en bloque <div>, <p>, <h1>, <form> y <li>; mientras que los que se muestran en línea pueden ser <span>, <a>, <label>, <strong>, <b> y <em>. Una de las características de los elementos div y span es que se le puede cambiar el ancho (width).

span { width: 100px; }

En teoría, esto hace que la caja que genera el <span> tenga 100 pixels de largo, pero lamentablemente en los navegadores el <span> sólo tendrá el largo de los caracteres que aloje. Para solucionar este problema se puede utilizar el siguiente estilo:

span {
width: 100px;
display:block;
}

Esto hace que el <span> se convierta en un elemento en bloque, pero también causará que el siguiente elemento en línea salte a la línea siguiente. Para evitar esto se puede agregar float:left al css.

Referencias:

http://web-ar.blogspot.com/2007/01/css-span-con-ancho-fijo.html


"Gracias, por compartir tus conocimientos"