Buenas buenas!!!
Dejo la resolución para mi ejercicio CU01029D del tutorial de desarrollo web con CSS desde cero.
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)?
Respuestas:
a) 20px margin left + 60px padding left + 40px border left + 250px width + 10px border right + 45px padding right + 20px margin right =
445pxb) Esta es medio tramposa, asi que veremos que pasa...
- En este caso: 20px margin top + 30px padding top + 15px border top + 16px que mide mi texto + 10px border bottom + 20px margin bottom = 111px
Digo que es tramposa, porque si bien la altura mínima la tengo definida por los margin + padding + border, la altura del div va a depender en general del navegador, yo le sume los 16px de la altura del div del navegador donde hice las pruebas y siempre respetando que esta un div al lado del otro. - Algo un poco mas preciso puede ser: 20px margin top + 30px padding top + 15px border top + 10px border bottom + 20px margin bottom = 95px + el alto del div que no lo sabemos certeramente.
c) En mi caso, al usar los float:left en los dos div, puse uno al lado del otro independientemente del ancho que tenga el navegador, y como los margin verticales son aditivos, la respuesta es
890px.Ahora mi código:
CU01029D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Padding y margin - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Padding y margin CSS. Top, right, botton, left" />
<meta name="keywords" content="curso, aprender a programar, html, css, padding, margin, (CU01029D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01029D.css"/>
</head>
<body>
<h1 id="ejercicio">Resolución ejercicio CU01029D</h1>
<h2 id="entrega">Entrega número 29</h2>
<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
</body>
</html>CU01029D.css
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/
*{
font-family: Arial, sans-serif;
}
html{
background-color: beige
}
#ejercicio {
text-align: center;
margin: 0;
}
#entrega {
text-align: center;
}
#div1,#div2{
width: 250px;
margin: 20px;
float: left;
background-color: #FFB6C1;
border-top: dotted 15px #DC143C;
border-right: dashed 10px green;
border-bottom: double 10px #FF00FF;
border-left: ridge 40px #2F4F4F;
padding: 30px 45px 0px 60px;
}
Tema: HTML y CSS calcular ancho total elementos con Padding margin border etc CU01029D (Leído 3819 veces)
RSS -
WAP2