display:block, inline, inline-block

display:block → el elemento coge el ancho, el alto especificados y se coloca verticalmente a continuación del anterior. Si tiene contenido y no especificamos ancho ni alto, el ancho será el 100% de la capa que lo contiene y el alto será lo que ocupe el contenido.

display:inline → el elemento no coje el ancho ni el alto y se coloca horizontalmente a continuación del anterior.

display:inline-block → el elemento coge el ancho y el alto y se coloca horizontalmente a continuación del anterior.

Ver video de explicación

Ver ejemplo de uso de display

display:inline-block → separación entre capas

Para evitar el espacio en blanco que hay entre las capas podemos:

  • poner las capas una a continuación de la otra, sin saltos de línea ni espacios en blanco.
  • comentar los saltos de línea
    <div></div><!--
    --><div></div>
  • Ajustar la maquetación de las capas
    <div></div
    ><div></div>
  • trabajar los font-size de 0px para eliminar esta separación (para mi gusto, la peor opción).

float:left

Elementos con display:block y float:left se irán posicionando horizontalmente.

  • Es necesario indicar este estilo tanto a la capa sobre la que me apoyo como a la capa que se apoya.
  • Este posicionamiento hace que la capa contenedora de los div con float no crezca según estos van creciendo. Para solucionarlo, puedo poner overflow:auto u overflow:hidden a la capa contenedora.
  • El estilo clear:right hace que cuando usas float no quepan elementos a la derecha. El estilo clear:both hace que no quepan a ambos lados.
.iceburg{
	position:fixed
}
.titanic{
	float:none
}

Ejemplo de varios posicionamientos

Varios posicionamientos

Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Ejercicio resumen de fundamentos de HTML
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Capas
  14. Hacer una NewsLetter con HTML
  15. favicon
  16. Hojas de estilos
  17. Selectores CSS
  18. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. text-overflow
  19. GIMP
  20. display:block, inline, inline-block
  21. Margin Collapse
  22. padding y width
  23. Ejercicios de maquetación vertical
  24. Hacer una newsletter responsive sin media queries
  25. img vs background
  26. Flexbox
  27. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. contenteditable
    6. Soporte para textos asiáticos
    7. wbr - Word Break
  28. Ejercicios de HTML
  29. Break! - gran día de repaso
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Ejercicio - Galería de fotos
  35. Navigation Bar
  36. !important
  37. Páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. HTML5: definición y ejemplos
  41. HTML5 vs HTML4
  42. divs semánticos
  43. Video y audio
  44. svg
  45. Formularios
  46. Animaciones con CSS3
  47. Responsive design
  48. Más ejercicios de html
  49. Página de error 404
  50. Insertar el buscador de google
  51. Dominio y alojamiento
  52. Ejercicio - Proyecto
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?