Autor Tema: Padding, margin CSS márgenes, rellenos Top, right, bottom, left Ejercio CU01029D (Leído 3997 veces)

jimmorrison · « **en:** 18 de Abril 2015, 22:45 »

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)?

html

Código: [Seleccionar]

<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_margin_padding.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja1
</div>
<div id="caja_2" class="cajas">
caja 2
</div>

<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

css

Código: [Seleccionar]

*{
margin: 0px;
padding: 0px;
}

body{background-color: #FA5858;}

footer{
text-align: center;
font-family: Arial;
}

.cajas{
text-align: center;
font-size: 2em;
background-color: #FFB6C1;
border-top: dotted #DC143C 15px;
border-right: dashed green 10px;
border-bottom: double #FF00FF 10px;
border-left: ridge #2F4F4F 60px;
padding-top: 30px;
padding-right: 45px;
padding-bottom: 0px;
padding-left: 60px;
}

#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}

#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}

respuestas
a) el ancho de cada caja (div) es 425px

b)es el alto total del div55

c)el total con margin padding div y borde de izquierda a derecha son : 720

este si me costo sacar las cuentas jaja ahora si necesito su sabiduria por favor.

tengo mas duda en el alto de la caja por el texto

Ogramar · « **Respuesta #1 en:** 19 de Abril 2015, 22:46 »

Hola para evitar la repetición

Código: [Seleccionar]

#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}

#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}

Es mejor

Código: [Seleccionar]

#caja_1, #caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}

El ejercicio decía La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

border-left: ridge #2F4F4F 60px; aquí tendría que haber sido border-left: ridge #2F4F4F 40px;

La pregunta a) tenemos 250 px (no contamos el margin) a lo que hay que añadir 45+60 px por padding left y right, suman 355, y añadiendo ~~70 px~~ 50 px por los border nos suma ~~425~~ 405 px

La pregunta b) el alto depende del navegador que utilices porque depende del tamaño de letra que asigne, y no es fácil de saber, hay que mirarlo con alguna herramienta de análisis. En mi navegador sale 37+30 + 15+10 = 92 (incluyendo bordes y rellenos pero no el margin), no nos sale igual

La pregunta c) si por cada caja hemos de sumar 20 px por la izquierda y 20 px por la derecha me salen ~~425+425 +40 +40 = 930 px~~ 405+405 +40 +40 = 890 px, no nos sale igual y aquí sí nos debería salir igual porque aquí no afecta el texto

Salu2

freddychpo · « **Respuesta #2 en:** 20 de Agosto 2015, 08:45 »

Una consulta Ogramar,

Para la pregunta a) Por que le sumas 70px? De donde sale el 70px? No seria solo 50px? Grosor del borde por izquierda 10px y grosor del borde por derecha 40px, lo que nos resulta como suma 50px.

Y seria 250px + 45px+60px + 50px= 405px.

Agradeceria tu respuesta, gracias.

Ogramar · « **Respuesta #3 en:** 20 de Agosto 2015, 21:11 »

Hola lo he revisado y parece que tienes razón, ahora mismo ya no recuerdo y debí confundirme.

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)

He editado el mensaje para corregirlo

Gracias por indicarlo!

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Padding, margin CSS márgenes, rellenos Top, right, bottom, left Ejercio CU01029D (Leído 3997 veces)

jimmorrison

Padding, margin CSS márgenes, rellenos Top, right, bottom, left Ejercio CU01029D

Ogramar

Re:Padding y margin CSS. Top, right, bottom, left. (CU01029D)

freddychpo

Re:Padding y margin CSS márgenes y rellenos. Top, right, bottom, left. (CU01029D)

Ogramar

Re:Padding y margin CSS márgenes y rellenos. Top, right, bottom, left. (CU01029D)

Preguntas y respuestas