Tamaño dinámico según bordes

[Arongutierrez]

Hola que tal, he estado jugando con css y he avanzado mucho, pero me he topado con una duda, como hago para que un elemento que está dentro de otro elemento, tengo un tamaño relativo al borde del elemento que lo contiene, osea que un elemento tenga siempre por ejemplo un tamaño de -10 pixeles según los 4 bordes del elemento que lo contiene. Si se tratase de los bordes de la pantalla, imaginemos que cambiase de pantalla, el elemento se estirará pero siempre -10 pixeles de los 4 bordes de la pantalla... pregunto porque me ha costado mucho dar con la solución, muchas gracias

[Developando]

Al elemento interior le puedes decir que tenga un width:100%, para que ocupe todo el espacio interio, y luego le aplicas un margin:10px;

- Utiliza el margin para indicar el espacio con los elementos que tenga fuera.

- O puedes utilizar padding:10px en el elemento contenedor

Aquí encontrarás unos ejemplos:

[URL]http://www.codeproject.com/Articles/227840/CSS-Basics-The-Box-Model-Margin-and-Padding[/URL]

[Arongutierrez]

muchas gracias!!!

[Arongutierrez]

Voy a seguir leyendo, porque mi único problema es que de manera horizontal ya lo había logrado, pero de manera vertical no, la cosa es raramente diferente.

[Arongutierrez]

Aun no logro hacerlo XD, quiero que el borde de abajo de una sección esté a una distancia de 10px del borde del elemento contenedor, y si el contenedor varía de tamaño, el la sección contenida igual lo haga, pero siempre que sus bordes estén a 10px del borde del contenedor. Tengo este código:

Contenedor (elemento de afuera):

Código:

#contenedor
{
	float: right;
	text-align: center;
	border: 1px solid #ccc;  
	border-radius: 10px;
        background-color: #f3f3f3;
        width: 785px;
        height: 485px;
        box-shadow: 0px 0px 20px gray;
    
}

Elemento contenido (elemento de adentro que quiero que tenga margenes de 10 pixeles arriba abajo derecha e izquierda).

Código:

#contdina
{
        height: 100%;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
	border: 1px solid #ccc;  
	border-radius: 10px;
        background-color: #f3f3f3;
}

Me quedó así con ese código:

el html es así:

Código:

<section id="contenedor">
	<section id="contdina">
	</section>				
</section>

Gracias de ante mano :)

[jeissondav1]

Iniciado por Arongutierrez

Aun no logro hacerlo XD, quiero que el borde de abajo de una sección esté a una distancia de 10px del borde del elemento contenedor, y si el contenedor varía de tamaño, el la sección contenida igual lo haga, pero siempre que sus bordes estén a 10px del borde del contenedor. Tengo este código:

Contenedor (elemento de afuera):

Código:

#contenedor
{
	float: right;
	text-align: center;
	border: 1px solid #ccc;  
	border-radius: 10px;
        background-color: #f3f3f3;
        width: 785px;
        height: 485px;
        box-shadow: 0px 0px 20px gray;
    
}

Elemento contenido (elemento de adentro que quiero que tenga margenes de 10 pixeles arriba abajo derecha e izquierda).

Código:

#contdina
{
        height: 100%;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
	border: 1px solid #ccc;  
	border-radius: 10px;
        background-color: #f3f3f3;
}

Me quedó así con ese código:

el html es así:

Código:

<section id="contenedor">
	<section id="contdina">
	</section>				
</section>

Gracias de ante mano :)

Bueno mira te explico, creas un contenedor con dimensiones fijas, bien luego generas un contenido con un alto de 100% y le sumas el borde. Hay esta tu problema el contenido tendria 100% + ancho de borde = Desborda su contenedor intenta bajar el alto del contenedor asi

Código:

	
Código HTML:
	
#contdina{
        height: 95%;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
	border: 1px solid #ccc;  
	border-radius: 10px;
        background-color: #f3f3f3;
}

No se si esas son las medidas exactas pero ve probando hasta que quede a tu gusto un saludo