En una lectura anterior hemos descrito el modelo de cajas.
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura.
Nos queda pendiente ver como se relacionan estas cajas html entre ellas.
Si se apilan. Si se ponen una al lado de la otra. O si se superponen.
Veámoslo repasando los elementos bloque, elemento en línea, y elementos híbridos (en línea-bloque).
Resumen de contenidos de esta publicación
En este punto te será útil saber que absolutamente todas las cajas caben dentro de uno de los grupos listados.
En algunos casos es posible que encuentres que la asignación es lógica.
En otras tendrás que hacer un acto fe.
Por ejemplo porqué los enlaces son elementos en línea?
Ante la duda siempre puedes consultar este enlace y este otro (Fuente oficial Mozilla)
O de todos modos siempre puedes deducirlo como explicaremos al final de esta entrada.[blockquote text=»La propiedad display puede tomar los valores
.nombreSelector{display:block;}
.nombreSelector{display:inline;}
.nombreSelector{display:inline-block;}
y los valores none, inherit e initial que veremos en otras publicaciones» show_quote_icon=»no» background_color=»#ffffff» border_color=»#1e73be»]
Elementos en línea
Los elementos en línea son
a, span, label, strong, br, input, textarea, abbr, acronym, b, basefont, bdo, big, cite, code, dfn, em, font, i, kbd, q, s, samp, select, small, strike, sub, sup, u, u, var
Su principales características son:
- son apilables. no tienen ni margin-top ni margin-bottom (por mucho que se lo indiques en el CSS). Si tienen margin-left y margin-right.
- no respetan ni width ni height. Estas medidas dependerán del tamaño en píxels de su contenido.
La forma más fácil de saber si un elemento es en línea o no es darle ancho.
Si le das width:100% y ves que la caja no ocupa todo el ancho disponible entonces se trata de un elemento en línea.
Elementos bloque
Los elementos bloque son:
div, p, h1, h2, h3, h4, h5, h6, hr, ol, ul, table, li, address, blockquote, center, dir, dl, fieldset, formisindex, noframes, noscript, pre, dd, dt, frameset, tbody, td, tfoot, th, thead, tr
Sus principales características son:
- Fuerzan un salto de línea (ocupan todo el ancho disponible)
- Respetan el width, el height, el margin-top y el margin-bottom indicados por el usuario.
El mejor modo de ver si un elemento es en bloque o no es escribir varios seguidos y comprobar si se fuerza el salto de línea o no.
Si los elementos quedan uno al lado del otro entonces pueden ser de tipo inline-block o en línea.
Elementos inline-block
Los elementos inline-block son las imágenes.
Una práctica común es convertir elementos bloque en elementos inline-block para maquetar un espacio de una web.
Por ejemplo dividir la página en 3 section o article y ponerlos uno al lado del otro.
Sería algo como:
section{display:inline-block;width:33%;}
fijaros en la imagen.
Hacemos uso de la propiedad border-box para asegurarnos que el ancho de las columnas se calcular siempre para ocupar el 33%.
También fijaros que para conseguir que la cajas estén perfectamente pegadas se usa font-size:0; en el selector universal y luego se corrige para cada etiqueta.
Para este ejemplo, en el css hemos usado elementos section que de todos modos ya son bloque (la instrucción display:block; no hacía falta).Y hasta aquí una entrada extensa en la que hemos repasado 3 conceptos importantes imprescindibles para aprender a maquetar web correctament.
¡Si tenéis dudas podéis dejarlas en los comentarios!
Espero que os pueda ser de utilidad.
¡Hasta mañana!
Deja una respuesta