HTML: elementos block y elementos inline
- Detalles
- Categoría: Programación
- Última actualización el Jueves, 10 Mayo 2012 22:06
- Escrito por cybnet
- Visto: 2487
En la creación de un documento HTML es muy importante comprender la diferencia entre los tipos de elementos: block e inline para evitar errores de código que puedan afectar al diseño del documento y pueda hacer que nuestro css no sea el mejor.
Para empezar decir que los nombres de cada tipo de elemento son bastantes explicativos en sí mismos, ¿o no?:
- block: elemento que forma un bloque separado.
- inline: elemento que permanece "en línea" con el resto del contenido.
Los elementos block
Un elemento block se puede definir a través de sus principales características:
- Forma un bloque y se posiciona a sí mismo verticalmente con un nuevo salto de línea sobre y bajo él.
- Toma toda la anchura disponible basándose en la anchura de su elemento padre (contenedor).
- Su altura cambia en relación a su contenido.
- Puede contener otros elementos inline y/o block.
- Se le puede asignar una anchura (width) y una altura (height) fija utilizando css.
Elementos que son por defecto tipo block:
| Elementos Block | ||||
| p | h1-h6 | div | ul | ol |
| dl | menu | dir | pre | hr |
| blockquote | address | center | noframes | isindex |
| fieldset | table | form | ||
En HTML5 no se definen técnicamente elementos block, aunque en la practica son elementos block, o pueden considerarse como tal:
| Nuevos Elementos Block en HTML5 | ||||
| article | aside | audio | canvas | figcaption |
| figura | footer | header | hgroup | output |
| section | video | |||
Los elementos inline
Un elemento inline tiene las siguientes características:
- Se posiciona a sí mismo horizontalmente en línea con el resto del contenido de su elemento padre (contenedor).
- Toma la anchura y altura mínima en relación a su contenido.
- SOLO puede contener otros elementos inline.
- NO se puede imponer una anchura y una altura fija a través de css.
Elemento que son por defecto tipo inline:
| Elementos Inline | ||||
| a | br | span | bdo | object |
| applet | img | map | iframe | tt |
| i | b | big | small | u |
| s | strike | font | basefont | em |
| strong | dfn | code | q | sub |
| sup | samp | kbd | var | cite |
| abbr | acronym | input | select | textarea |
| label | button | |||
Podemos alterar el tipo por defecto de un elemento html usando las reglas css display:block y display:inline cambiando las propiedades de un elemento de block a inline o de inline a block.
Ejemplos de elementos block y elementos inline
1. Un párrafo, el elemento html tipo block
en su estado por defecto: (nota que le he puesto un borde al párrafo para que se vea claramente la altura y la anchura).
La anchura es igual a la anchura del elemento padre (contenedor). La altura viene determinada por el contenido.
2. Ejemplo de un párrafo con anchura y altura fija usando css:
Anchura puesta en 300px (width:300px;), altura puesta en 100px (height:100px;).
3. Veamos un párrafo convertido a elemento inline usando display:inline;
El párrafo es ahora un elemento inline. La anchura y la altura son el mínimo necesario en relación a su contenido.
4. Un link (elmento inline ) en su estado por defecto aparecerá de esta forma:
Cómo anidar etiquetas html correctamente
5. Un link con anchura y altura fija (para demostrar que no funciona)
Como enviar un formulario por email con php.
Nota: Algunas versiones de Internet Explorer aplican las dimensiones fijas por un error en la interpretación de css pero no debería!!! Si se necesita dar una altura y anchura fija a un elemento inline hay que añadir display:block a ese elemento.
6. Convirtamos un link en elemento block usando display:block;
Perfil
Artículos
RSS
Google +1