Comportamiento de div anidados
Los elementos h y div son de tipo block (ocupan todo el ancho disponible, se ubican uno debajo del otro).
Los elementos <span>, <a>, <strong>, <em>, <img>, etc son de tipo inline
(ocupan solo el espacio necesario para su contenido, se ubican uno al lado del otro).
Mediante el comando display esto puede ser modificado como se verá en los siguientes ejemplos
INLINE-BLOCK aplicado a div CLASE PADRES:
.divpadre {border: 5px solid black;background-color: dimgray; display: inline-block;}
.divhijo {border: 3px solid red;}
#hijo11 {background-color: whitesmoke;}
#hijo21 {background-color: floralwhite;}
#hijo31 {background-color: skyblue;}
Este es un <div> padre, el ancho se ajusta al contenido
Este es un <div> padre con 1 <div> hijo dentro, el ancho se ajusta al contenido
hijo11, el ancho abarca el maximo posible sin importar su contenido
Este es un <div> padre con 3 <div> hijos dentro, el ancho se ajusta al contenido
hijo11, el ancho abarca el maximo posible sin importar su contenido
hijo21, el ancho abarca el maximo posible sin importar su contenido
hijo31, el ancho abarca el maximo posible sin importar su contenido
INLINE-BLOCK aplicado a div CLASE HIJOS:
.divpadre {border: 5px solid black;background-color: dimgray;}
.divhijo {border: 3px solid red;display: inline-block;}
#hijo12 {background-color: whitesmoke;}
#hijo22 {background-color: floralwhite;}
#hijo32 {background-color: skyblue;}
Este es un <div> padre
Este es un <div> padre con 1 <div> hijo dentro
hijo12, el ancho se ajusta al contenido
Este es un <div> padre con 3 <div> hijos dentro
hijo12, el ancho se ajusta al contenido
hijo22, el ancho se ajusta al contenido
hijo32, el ancho se ajusta al contenido
INLINE-BLOCK aplicado a div CLASE PADRE Y div CLASE HIJOS:
.divpadre {border: 5px solid black;background-color: dimgray;display: inline-block;}
.divhijo {border: 3px solid red;display: inline-block;}
#hijo13 {background-color: whitesmoke;}
#hijo23 {background-color: floralwhite;}
#hijo33 {background-color: skyblue;}
Este es un <div> padre
Este es un <div> padre con 1 <div> hijo dentro
hijo13
Este es un <div> padre con 3 <div> hijos dentro
hijo13
hijo23
hijo33
Comportamiento de img anidadas
INLINE-BLOCK aplicado a div CLASE PADRE :
.divpadre4 {border: 5px solid black;background-color: dimgray;display: inline-block;}
.img{ width:100px;display: inline-block;}
#img1 {width:100px;}
#img2 {width:300px;}
#img3 {width:200px;}
INLINE-BLOCK aplicado a img CLASE HIJOS :
.divpadre5 {border: 5px solid black;background-color: dimgray;}
.img1{ width:100px;display: inline-block;}
#img11 {width:100px;}
#img12 {width:300px;}
#img13 {width:200px;}
BLOCK aplicado a img CLASE HIJOS :
.divpadre6 {border: 5px solid black;background-color: dimgray;}
.img2{ width:100px;display: block;}
#img21 {width:100px;}
#img22 {width:300px;}
#img23 {width:200px;}
INLINE-BLOCK aplicado a div PADRE y BLOCK aplicado a img HIJOS :
.divpadre7 {border: 5px solid black;background-color: dimgray; display: inline-block;}
.img3{ width:100px;display: block;}
#img31 {width:100px;}
#img32 {width:300px;}
#img33 {width:200px;}
