Índice

Cajas en bloque o en línea

En HTML 4.1, la propiedad de estilo display permite redefinir un elemento en línea como un elemento en bloque, y a la inversa.

display:

inline; (en línea)

block; (de tipo bloque)

Esta propiedad es muy rica en posibilidades de presentación y se utiliza a menudo en hojas de estilo CSS complejas.

Ejemplo 1

Las nuevas etiquetas semánticas (consulte el capítulo Contenedores semánticos) son elementos en línea. Para atribuirles una función de presentación, es preciso definirlas como elementos de tipo bloque. Apliquemos esta propiedad a la etiqueta <nav>.

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style type="text/css"> 
nav { display: block; 
      width: 360px; 
      border: 1px solid gray; 
      background-color: rgb(215,230,245); 
      padding-left: 4px;} 
a { text-decoration; none;} 
</style> 
</head> 
<body> 
<nav> 
<a>Inicio</a> | 
<a>Productos</a> | 
<a>Soluciones</a> | 
<a>Puntos de venta</a> | 
<a>Contacto</a>  
</nav> 
</body> 
</html>
images/CAP17IMG02.png

Ejemplo 2

Los items de las listas son elementos de bloque. Aparecen unos debajo de otros. Mediante la propiedad display: inline, es posible mostrarlos en pantalla en una única línea.

<!DOCTYPE html> 
<html ...