Duda teórica sobre posicionamiento

[jamm1993x]

seisieteocho engloba al cuadro seis, al siete y al ocho, y sieteocho solo engloba al 7 y al 8

Añado que si pongo sólo los divs (sin p), muestra las cajas como en la primera imagen, es sólo cuando pongo un p que no es absolute cuando me las desordena (si lo pongo como absolute o float no pasa nada, lo que no entiendo es por qué si en teoría creo que esa propiedad afecta al elemento dentro de su contenedor)


El código CSS es el siguiente:

body{
width: 1000px;
margin: 8 auto;
}

div{
font-size:0;
}

p {
font-size:14px;
position: absolute;
}

#superior{
width: 1000px;
height: 200px;
}

#inferior{
width: 1000px;
height: 500px;
}

#uno{
width: 490px;
height: 190px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#dostres{
width: 500px;
height: 200px;
display: inline-block;
}

#dos{
width: 490px;
height: 90px;
margin: 4px;
border: 1px solid black;

}

#tres{
width: 490px;
height: 90px;
margin: 4px;
margin-top: 8px;
border: 1px solid black;
}

#cuatro{
width: 290px;
height: 490px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#cinco{
width: 290px;
height: 490px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#seisieteocho{
width: 400px;
height: 500px;
display: inline-block;
}

#seis{
width: 390px;
height: 190px;
margin: 4px;
border: 1px solid black;

}

#sieteocho{
width: 400px;
height: 300px;

}

#siete{
width: 190px;
height: 290px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#ocho{
width: 190px;
height: 290px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}