Buenas noches saludos a todos, aquí os dejo este ejercicio que he realizado, me he liado un poco con los cálculos pero creo que al final ha salido bien, os agradecería que le echarais un vistazo.
Gracias de antemano. Saludos
<!DOCTYPE html>
<html lang="es">
<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Padding y Margin CSS</h1>
</header>
</div>
<div id="div1">
Este es el div 1
</div>
<div id="div2">
Este es es el div 2
</div>
</body>
</html>
Y ahora el CSS
/*padding y margin en css */
#wrapper{text-align: center;}
#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}
#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}
a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
250px ancho interior + 10px borde izquierdo + 45px relleno izquierdo + 40px borde derecho + 60px relleno derecho : total 405px
Mas el margin: 40px total respuesta a)445px
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
El alto será variable dependiendo del contenido del div. Si no especificamos nada lo pondrá el navegador por defecto.
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)?
El ancho total para los dos div sera de 890px