Elementos en bloque
Cada uno de los elementos de la página web pueden ser elementos en bloque o elementos en línea. Los elementos en bloque llenan todo el espacio del elemento que los contiene, mostrando de esa manera una especie de caja.
En el siguiente ejemplo vamos a colocar dos párrafos y podrán observar que aunque el contenido de ambos es pequeño y sobraría espacio a los lados, al ser estos elementos en bloque lo que harán ambos es ocupar todo el ancho del contenedor padre y hacer un salto de línea cuando se tenga que mostrar el segundo elemento que colocaremos en color verde.
Veamos algunos elementos en bloque
- address
- article
- aside
- blockquote
- canvas
- dd
- div
- dl
- dt
- fieldset
- figcaption
- figure
- footer
- form
- h1-h6
- header
- hr
- li
- main
- nav
- noscript
- ol
- p
- pre
- section
- table
- tfoot
- ul
- video
Como se pudo apreciar en el ejemplo anterior ese es el comportamiento por defecto de los elementos en bloque, así hubiéramos colocado un único punto dentro de un párrafo el formaria una caja con el ancho total del container padre.
Vamos a crear un ejemplo en el que se observan varios elementos diferentes y se podrá apreciar como ocupan el ancho total del contenedor padre. Colocaremos diferente color de fondo a cada uno de los bloques para que se pueda apreciar con facilidad cada uno de ellos.
De momento no estamos enfocados al trabajo con estilos, así que no te preocupes por ese atributo que en el futuro vamos a trabajar con hojas de estilo a profundidad. Analiza que todos los elementos que vamos a colocar son en bloque.
Elementos en línea
Como podrás imaginar, este tipo de elementos sí se posiciona al lado del elemento anterior y únicamente ocupan el ancho que tienen, no realizan ningún salto de línea.
En el siguiente ejemplo vamos a colocar tres botones, cada uno con un tamaño diferente. Podrás apreciar que los tres botones están uno al lado del otro.
Veamos algunos elementos en linea
- span
- strong
- sub
- sup
- textarea
- time
- tt
- var
- code
- dfn
- a
- abbr
- acronym
- b
- bdo
- big
- br
- button
- cite
- label
- map
- object
- output
- q
- samp
- script
- select
- small