Propiedad left

[Vanessita]

Hola a ambos,

Muchas gracias por sus respuestas, han sido muy ilustrativas.

kervinojeda, sí, lo que quiero es centrar la cajita en todo el centro del cuadrado, aquí hay dos formas más que conseguí hacerlo:

Forma 1:

Código:

body {
margin: 0;
}

#cajita {
position: absolute;
border: 1px dashed;
height: 40px;
width: 120px;
left: 419px;
top: 311.5px;
}

#contenedor {
position: relative;
background-color: grey;
height: 665px; 
width: 960px; 
margin-left:auto; 
margin-right:auto;
}

Forma 2:

Código:

body {
margin: 0;
}
		
#cajita {
position:absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 1px dashed;
height: 40px;
width: 120px;
}

#contenedor {
position:relative;
background-color: grey;
height: 665px;
width: 960px;
margin:auto;
}

Iniciado por Triby

Lo dices por el fondo blanco que aparece arriba del fondo gris?

Es el comportamiento normal de los márgenes, los espacios "sin usar" no aplican el fondo del contenedor, por lo que tienes 4 opciones:

1- Aplicar el fondo directamente a body
2- Eliminar el margen superior de .cajita y aplicarlo como margen interior (padding) en #contenedor
3- Eliminar el margen superior de .cajita y colocar antes de este un elemento que tenga la altura que necesitas de separación
4- La menos adecuada, pero depende de lo que realmente quieres hacer: Recurrir nuevamente a posición absoluta

Si ninguna de las 3 primeras opciones te convence, cuéntanos exactamente lo que quieres y solo así te podremos sugerir algo más concreto.

Triby, eso de 'los espacios "sin usar" no aplican el fondo del contenedor' aplica sólo para el top? Lo pregunto porque probé con margin-left
y no sucede lo mismo.

Por otro lado, y aunque sé que depende de lo que se quiera hacer, ¿Por qué dices que la posición absoluta es la menos adecuada?

Saludos y muchas gracias.