Autor Tema: Margin y Padding CSS calcular ancho total ocupado por un div Ejercicio CU01029D#  (Leído 2370 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1295
    • Ver Perfil
Esta es la solución que propongo para este ejercicio...
Citar
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)?
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)?
Código HTML:
Código: [Seleccionar]
<html>
<head>
<title>W3C Validator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01029D.css">
</head>
<body>
<div>div 1</div>
<div>div 2</div>
</body>
</html>

Código CSS:
Código: [Seleccionar]
div {
display:inline-block;
font-size: 100px;
margin: 20px;
padding: 30px 45px 0px 60px;
width: 250px;
background-color: #FFB6C1;
border-style: dotted dashed double ridge;
border-color: #DC143C green #FF00FF #2F4F4F;
border-width: 15px 10px 10px 40px
}

a) 405px

b) Dependerá del tamaño de letra que se aplique.

c) 850px

Saludos.
« última modificación: 28 de Enero 2016, 09:06 de Ogramar »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2038
    • Ver Perfil
Hola pedro

Para el apartado a) confirmamos el resultado de otro hilo

Citar
div1: 250 px interior + 45 px relleno derecha + 60 px relleno izquierda + 10 px borde derecho + 40 px borde izquierdo

TOTAL div 1:  405 px (añadiendo el margin tendríamos 445 px)

Por tanto correcto

El apartado b) como indicas depende del tamaño de letra, del número de líneas, etc.

La pregunta c)

Citar
La pregunta c) si por cada caja hemos de sumar 20 px por la izquierda y 20 px por la derecha me salen 405+405 +40 +40 = 890 px

¿La diferencia puede estar en que no hayas considerado incluidos los margin más a la izquierda y más a la derecha?

Saludos

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1295
    • Ver Perfil
En realidad los que no había contado son los que quedaban en el interior.

Gracias por la corrección.

Saludos.

RESUMEN FINAL DE CÓMO QUEDA EL EJERCICIO:

PREGUNTA A

div1: 250 px interior + 45 px relleno derecha + 60 px relleno izquierda + 10 px borde derecho + 40 px borde izquierdo

TOTAL div 1:  405 px (añadiendo el margin tendríamos 445 px) Por tanto 445 px respuesta para la pregunta a)


PREGUNTA B

El alto ocupado será variable dependiendo del número de líneas, tamaño de letra dentro del div, etc. es la respuesta para la b)


PREGUNTA C

Como respuesta para la c) tenemos que para los dos div el ancho total ocupado es el doble que para un div, Total para los dos div: 890 px es el ancho total ocupado por los dos div
« última modificación: 28 de Enero 2016, 09:05 de Ogramar »

 

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".