Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 23 de Agosto 2017, 20:42

Título: HTML CSS calcular ancho total ocupado por elementos con border y margin CU01029D
Publicado por: EnigmaticNerd en 23 de Agosto 2017, 20:42
Buenas tardes. Este es el enunciado del ejercicio CU01029D del curso de fundamentos de programación web con CSS:

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

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <title>CU01029D</title>
    <style type="text/css">
       
        div{
            background-color:#FFB6C1;
            border-top:dotted 15px #DC143C; padding-top: 30px;
            border-right:dashed 10px #00FF00; padding-right: 45px;
            border-bottom:double 10px #FF00FF; padding-bottom: 0;
            border-left:ridge 40px #2F4F4F; padding-left: 60px;
            width:250px; margin:20px;
            display:inline-block;
        }

        </style>
</head>
<body>

    <div>Prueba1</div><div>Prueba2</div>

</body>
</html>

Estas son las preguntas planteadas:
Citar
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)?

Acá las respuestas:

R.a) El ancho total de cada div es de 405px.

R.b) El alto total de cada div es de 55px.

R.c) El ancho 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 es 425px.

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Título: Re:HTML CSS calcular ancho total ocupado por elementos con border y margin CU01029D
Publicado por: Alex Rodríguez en 24 de Septiembre 2017, 18:54
Hola EnigmaticNerd, el código está correcto pero no la respuesta a las preguntas

Puedes ver la respuesta a las preguntas en https://www.aprenderaprogramar.com/foros/index.php?topic=3159.0

Saludos
Título: Re:HTML CSS calcular ancho total ocupado por elementos con border y margin CU01029D
Publicado por: EnigmaticNerd en 24 de Septiembre 2017, 23:01
Esperaba que alguien me corrigiese este ejercicio. No terminé de comprender lo de las sumas, por ejemplo. ¿Por qué no se toma en cuenta los rellenos inferior y superior, además del bordes superior e inferior a la hora de hacer la suma?.
Título: Re:HTML CSS calcular ancho total ocupado por elementos con border y margin CU01029D
Publicado por: Alex Rodríguez en 06 de Noviembre 2017, 18:31
Hola, indica cómo haces tú los cálculos detalladamente para poder ver si estás fallando en algo. Hay que diferenciar cuando se mide en horizontal, en este caso no tenemos en cuenta margin ni padding superior e inferior porque estamos midiendo en horizontal, y cuándo se mide en vertical, en ese caso no tenemos en cuenta los margin y padding horizontales. Saludos.
Título: Re:HTML CSS calcular ancho total ocupado por elementos con border y margin CU01029D
Publicado por: KOFFERO en 07 de Noviembre 2017, 21:28
Básicamente va ha depender lo del (vertical), porque si nosotros a medidas que agregamos mas contenido, se va alargar, por eso no sabemos exactamente si va dar un tamaño exacto, por eso no se suman.

Un saludo. :D :D