Padding y margin CSS. Top, right, bottom, left. Margin negativo y centrar con margin auto. Ejemplos (CU01029D)
Mi respuesta para el ejercicio del curso básico de desarrollo web con HTML y CSS desde cero:
Antes que nada aqui esta el HTML con CSS interno:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Margin y Padding</title>
<style type="text/css">
h1{text-decoration: underline;}
/*Para los DIV*/
#as div{float: left; text-align: center; background-color: #FFB6C1;
border-width: 15px 10px 10px 40px;
border-style: dotted dashed double ridge;
border-color: #DC143C #00FF00 #FF00FF #2F4F4F;
padding: 30px 45px 0 60px;}
/*Margenes de los DIV*/
#as div:first-child{width: 250px; margin: 20px 0 20px 20px;}
#as div:last-child{width: 250px; margin: 20px 20px 20px 0;}
</style>
</head>
<body>
<h1>Uso de margin y padding</h1>
<div id="as">
<div>DIVISION 1</div>
<div>DIVISION 2</div>
</div>
</html>
Aquí están las respuestas a las siguientes preguntas:
Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.
Responde a las siguientes preguntas:
a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
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)?
RESPUESTAS
a) Sumando el relleno, mas el tamaño de los bordes, mas el tamaño de la caja en si seria 405px
b) Sumando el borde superior e inferior, mas el relleno, mas el tamaño de la letra... De hecho no estoy seguro de eso, pero imaginare que la letra mide 12px aprox... En tal caso, el tamaño vertical es de 67px
c) Sumando esta vez los margenes, los bordes, los rellenos y las cajas daría un total de 695px
Tema: CSS y HTML Cálculo de ancho y largo de divisiones con div cómo operar CU01029D (Leído 3378 veces)
RSS -
WAP2