Autor Tema: Padding y margin CSS. Top, right, bottom, left. Margin negativo ejemplo CU01029D  (Leído 466 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
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:

Código: [Seleccionar]
<!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)

Código: [Seleccionar]
/* 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;
}
« última modificación: 05 de Abril 2018, 22:05 de Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
Buenas, las respuestas en principio no son correctas, al menos no coinciden con la respuesta que se ha considerado correcta en otros hilos del foro. Revisa este hilo: https://aprenderaprogramar.com/foros/index.php?topic=3159.0

Compara tus respuestas con las indicadas y a partir de ahí podrás sacar algunas conclusiones

Salu2

 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".