Autor Tema: HTML calcular la anchura total en pixeles ocupada Padding y margin CSS. CU01029D (Leído 3234 veces)

Lorenzo31 · « **en:** 16 de Febrero 2016, 19:33 »

Buenas tardes, dejo la respuesta a mi ejercicio.

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"/> 
		<link rel="stylesheet" type="text/css" href="estilos129D.css"/>
	</head>
	
	<body>
		<div>DIVISIÓN 1</div>
		<div>DIVISIÓN 2</div>
	</body>
</html>

estilos129D.css

Código: [Seleccionar]

div {width:250px; margin:20px; background-color:#FFB6C1; 
    border-top:dotted 15px #DC143C; padding-top:30px;
    border-right:dashed 10px green; padding-right:45px;
    border-bottom:double 10px #FF00FF; padding-bottom:0;
    border-left:ridge 40px #2F4F4F; padding-left:60px; }

a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

250 + 45 + 60 +10 + 40 = 405px

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

30px del padding-top + lo que haga el div por defecto, que no lo sé

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

405px + 405px + 20px+20px = 850px

He usado la propuedad inline-block que aun no hemos dado, para poder ponerlos uno al lado del otro, sino al ser un elemento block ocupa todo el ancho, no sé si debia hacerlo de otro modo.

pedro,, · « **Respuesta #1 en:** 17 de Febrero 2016, 22:52 »

Hola Lorenzo.

a) No es correcto.

width +margin left+margin right + border-right + border-left+ padding left + padding right

250px+ 20px + 20px + 10px + 40px + 60px + 45px = 445px

b) Bien.

c) No es correcto, sería 890px

Saludos.

Lorenzo31 · « **Respuesta #2 en:** 17 de Febrero 2016, 23:20 »

Vale cierto, ahora lo veo, me he dejado de contar el margin:20px; del div, que va en todos los lados.

Ok ahora lo he visto, mil gracias Pedro.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: