Hola a todos !! Dejo a continuación el archivo html y la hoja de estilo correspondiente al ejercicio CU01029D del curso básico de programación CSS. Desde ya muchas gracias.
Un saludo, Luis
EJERCICIO
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)?
El ancho total es igual a la suma: ancho del div(width) mas los bordes derecho e izquierdo (border-right y border-left)
250px+10px+40px=300px
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
El alto total del div es la suma: tamaño de la fuente + el relleno superior (padding-top) + el borde superior (border-top) + relleno inferior(padding-botton) + borde inferior (border-botton)
16px+30px+15px+0px+10px=71px
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 es la suma del ancho de cada div + el margen derecho del div 1 + mas el margen izquierdo del div 2, ya que los margenes horizontales se acumulan.
300px+20px+300px+20px=640px
El documento html es:
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01029D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div>div 1</div>
<div>div 2</div>
</body>
</html>
La hoja de estilos (estilos.css)
/* Curso CSS estilos aprenderaprogramar.com*/
div{
display:inline-block;
width: 250px;
margin:20px;
background-color:#FFB6C1;
border-style:dotted dashed double ridge;
border-width:15px 10px 10px 40px;
border-color:#DC143C green #FF00FF #2F4F4F;
padding:30px 45px 0 60px;
}
Tema: Padding y margin CSS. Top, right, bottom, left. Margin negativo ejemplo CU01029D (Leído 2180 veces)
RSS -
WAP2