«Elementos en bloque «y «elementos en línea»

3 modos de visualización de los elementos HTML

Por defecto, los elementos HTML se muestran en uno de los siguientes modos:

1- Bloque / block

elementos superpuestosOcupa todo el ancho disponible. Cuando 2 elementos de bloque se suceden en una página, se posicionan (por defecto) uno debajo del otro.

Ejemplo típico de elemento de bloque: el elemento<p> (el párrafo).

2- Inline / en línea

elementos lado a ladoSólo ocupa el ancho necesario para mostrar el contenido y no provoca saltos de línea. Cuando 2 elementos inline se suceden en una página, se posicionan uno al lado del otro (si el ancho de la página lo permite).

Ejemplo típico de elemento inline: el elemento<img> (imagen).

3- Invisible / notdisplayed

elemento invisibleAlgunos elementos sólo se utilizan para proporcionar información invisible al usuario de la web.

Ejemplo típico de elemento no mostrado:el elemento <meta>.

Función de los elementos más comunes

Los elementos «bloque» son generalmente los que se utilizan para el diseño de la página, mientras que los elementos «en línea» se utilizan sobre todo para asignar estilo a una porción de texto.

Aquí tienes algunos elementos de bloque que te pueden resultar familiares:

  • <iv>: multipurposetag. Esta etiqueta se suele utilizar para posicionar el contenido dentro de la página.
  • <h1><h6>: enmarca un título o subtítulo.
  • <p>: párrafo.
  • <ul><ol><dl> : Listas (desordenadas, ordenadas o con definición).
  • <li><t><dd>: Lista de elementos, definición y título de la definición.
  • <table> :table.
  • <blockquote> :indented (right-shifted) paragraph normally used to presenta citation.
  • <pre> :bloque de decodificación preformateado.
  • <form> :formulario de entrada.

Y aquí tienes algunos elementos inline que puede que ya hayas utilizado:

  • <span> : marcado multiuso, muy práctico para aplicar un estilo CSS a una porción de texto, por ejemplo.
  • <a>: ancla, permite crear un enlace saliente o permite especificar un punto concreto de la página al que se quiere dirigir un enlace.
  • <strong>: se utiliza para marcar la importancia particular de una porción de texto. Todos los navegadores actuales mostrarán esta parte en negrita. NOTA: la antigua etiqueta <b> (negrita) está obsoleta y no debe utilizarse más.
  • <em>: se utiliza para enfatizar la importancia de una porción de texto (con menos fuerza que <strong>). Todos los navegadores actuales mostrarán esta parte en cursiva. NOTA: la antigua etiqueta <i> (cursiva) está obsoleta y ya no debe utilizarse.
  • <img>: imagen,permite colocar una imagen en medio del flujo de texto.
  • <br>: salto de línea. Este es un caso muy especial de elemento inline, que provoca un salto de línea. A pesar de esta peculiaridad,<br> definitivamente no es un bloque y debe ser clasificado como un elemento en línea.
  • <input>: campos de entrada en un formulario, como o
  • <abbr>: señala una abreviatura (pon el cursor encima para ver cómo funciona). Nota: Internet Explorer no admite esta etiqueta en versiones anteriores a la 7.

Anidamiento de elementos de bloque y en línea

En general, un elemento en línea puede anidar dentro de un elemento de bloque, mientras que lo contrario no es cierto.

Anidamiento permitido:

<p>
Phrase avec un <strong> mot</strong> important
</p>

Anidamiento INTERDIT:

<strong>
<p>Première phrase</p>
<p>Deuxième phrase</p>
</strong>

Este último ejemplo probablemente funcione en algunos navegadores,pero no se ajusta a las convenciones relativas al anidamiento de elementos y no debería utilizarse en sus páginas.

Sin embargo, puede anidar un elemento de bloque dentro de otro elemento de bloque o un elemento inline dentro de otro elemento inline sin ningún problema.

Estas reglas generales tienen algunas excepciones, una lista de las cuales se puede encontrar en alsacreations.

Cambiar el modo de visualización de un elemento

A veces puede ser muy conveniente (¡incluso esencial!) cambiar la forma en que se muestra un elemento.

La propiedad CSS «display «permite cambiar de un modo de visualización a otro de forma muy sencilla escribiendo :

display:block
display:inline
ou
display:none

A modo de ejemplo, aquí se muestra cómo mostrar y gestionar un enlace(elemento inline <a>) en forma de bloque:

Código:

<a href="bloc-en-ligne.php" style="background-color:#FFCCCC;display:block;">
<img src="images/blocs-lignes.gif" alt="">
Exemple de lien
</a>

Resultado:

Ejemplo de enlace

Así es como quedaría este enlace sin la propiedad "display:block":

Ejemplo de enlace

Nota importante: aunque la propiedad «display «permite cambiar la forma en que un elemento se muestra en la pantalla, no cambia en absoluto su naturaleza real. Los elementos «bloque» no pueden anidarse dentro de elementos «en línea», aunque se hayan modificado sus propiedades de visualización.

Propiedades CSSreservadas para elementos «block»

En general, la mayoría de las propiedades CSS destinadas a posicionar un elemento en la página están reservadas para elementos «block «o que tengan la propiedad «display:block».

Este es el caso, por ejemplo, de las siguientes propiedades:

  • Posición(estática, absoluta, relativa, fija): permite definir cómo se posiciona un elemento en relación con otros elementos de la página.
  • Izquierda, arriba,derecha,abajo :posicionan los lados de los elementos.
    • Casos (algo)especiales

      1- Posicionamiento de elementos inline

      Como acabamos de ver en el capítulo anterior, la propiedad «position «no se puede aplicar a un elemento inline. Sin embargo, podemos posicionar este tipo de elementos utilizando la propiedad «float».

      Esta propiedad nos permite posicionar cualquier tipo de elemento en el lado izquierdo (float:left;)o derecho (float:right;)de un bloque de texto, por ejemplo. La imagen que contiene este párrafo se posiciona utilizando un «float:left».Para saber más sobre cómo utilizar esta propiedad, consulta nuestra página titulada Maquetación con CSS.

      2- Altura y anchura para elementos en línea

      En general, los elementos en línea no tienen una anchura o altura predefinidas. Es su contenido el que determinará estos valores.

      Así que uno estaría tentado a pensar que estas etiquetas no pueden tener una propiedad de anchura o altura.

      Sin embargo, hay algunas etiquetas inline que sí tienen un significado. Estos son:

      • <img>
      • <input>
      • <textarea>
      • <select>
      • <object>
      • que se denominan elementos «sustituidos» o «reemplazados»,dependiendo de la traducción.

        3- Marcos y márgenes para elementos inline

        Los elementos inline pueden perfectamente recibir márgenes internos y externos (paddingy margin), así como bordes (border)o un fondo (background).

        Contrariamente a lo que se podría pensar, un elemento inline puede tener, por tanto, la apariencia de una «caja».

        Ejemplo:

        <p>Exemple de mot <span style="border-style:solid;border-width:2px"> encadré</span></p>

        Resultado:

        Ejemplo de una palabra en caja

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *