Hola:
Bueno, con su permiso me adelantaré un poco y veré si le explico lo más sencillo posible, (más que para que lo entienda usted es para que lo entendamos los dos ).
Digamos que una página html se compone de cajas, todo lo que usted ponga en su pagina html, genera una caja, incluso un párrafo es una caja.
Muchas de esas cajas, por defecto son display block
Y se llaman cajas de bloque.
Hay otras cajas que pueden ser display inline
Una caja con display block puede contener elementos que tengan display inline.
Pero cajas que son display inline, no pueden contener elementos que sean display block.
Por ejemplo, por defecto algunas cajas que son display block serían:
body
div
p
ul
ol
li
h1
h2
h3
h4 etc.
hr
form
fieldset
col
table
td
iframe etc, etc.
.............................
Las que son cajas inline serían algunas como
a
abbr
b
big
br
cite
code
em
span
strong etc. etc.
............................
Display block significa una caja en bloque, o sea todos los elementos que estén dentro de esa caja serán bloques, o se comportarán como bloques.
Una caja con display inline, significa una caja en línea, o sea que todos los elementos que estén dentro de esa caja estarán en línea.
Por ejemplo, los elementos a nivel de bloque generan una nueva línea, ya que después de insertar un elemento a nivel de bloque, el siguiente elemento aparecerá en la línea siguiente.
Recuerde como puede ser un párrafo, pues el siguiente párrafo aparecerá debajo de ese primer párrafo y bastante separado, ¿porqué? porque el primer párrafo es una caja que no se compone solo de la altura de la letra, sino que tiene también unas medidas por defecto.
Por ejemplo
<html>
<head>
<title>nivel de bloque</title>
<style type="text/css">
p{border:thin solid #cc00cc}
</style>
</head>
<body>
<div>
Este es un texto dentro de un elemento tipo block</p>
Este es otro texto dentro de un elemento tipo block</p>
Y este es un texto dentro de un elemento tipo block</p>
</div>
</body>
</html>
He puesto el estilo css dentro de la pagina html, para no hacer por ahora una hoja de estilo aparte nada más.
Usted haga una página de prueba y verá como quedan los párrafos.
........................
Ahora, los elementos inline, eliminan una nueva línea, y cuando introducimos más de un elemento inline a nivel de línea se puede ver que aparecen uno seguido del otro.
El modelo de formato visual de las cajas implica que estos elementos son para mostrar y formatear contenido, pero no para contener otros elementos, por ejemplo.
<html>
<head>
<title>nivel inline</title>
<style type=text/css=>
span{border:thin solid #cc00cc}
</style>
</head>
<body>
<span>Este es un texto dentro de un elemento tipo inline</span>
<span>Este es otro texto dentro de el elemento tipo inline</span>
<span>Y este es otro texto dentro de un elemento tipo inline</span>
</p>
</body>
</html>
En este ejemplo he utilizado un elemento en línea para modificar las propiedades o estilos del texto que hay dentro del párrafo,
pero con tal de que no se muestre como si fuese un parrafo nuevo.
Si hubiese usado un elemento a nivel de bloque para ello, entonces aparecería como un párrafo nuevo.
Haga una pagina de prueba y verá la diferencia.
Por esa razón muchas veces cuando escribimos texto y a continuación ponemos un enlace, este enlace se va directamente a ocupar la siguiente línea, (la de abajo) porque el body por defecto, como le mostré en la lista de arriba, es una caja a nivel de bloque y todo lo que ponga dentro se comportará como bloques, y si ponemos un párrafo (que es un bloque) y ponemos un enlace( que es un bloque), es lógico que el enlace (que es un bloque) se ponga debajo del párrafo (que es otro bloque).
A menos que les diga a esos elementos que se comporten como tipo inline o en línea, (con el display:inline).
Bueno hay unas cuantas cosas más, y tampoco es tán fácil de entender.
Pero lo importante es que poco a poco hay que ser un poquito astuto al hacer una pagina, por ejemplo usaremos elementos a nivel de línea para el contenido, y elementos a nivel de bloque (o caja) para la estructura. Y así se le puede sacar un buen rendimiento a las distintos tipos de caja de nuestra página.
Espero le sirva de algo, por lo menos para ir cogiéndo práctica y que no se haya liado mucho con esta explicación
Saludos
