Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Dimitar Stefanov en 12 de Enero 2016, 20:52

Título: diferencia entre padding y margin CSS cómo dejar margen todas direccion CU01029D
Publicado por: Dimitar Stefanov en 12 de Enero 2016, 20:52
Mi códigos.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,curso">
<link rel="stylesheet" type="text/css" href="estilos37.css">
<title>Ejemplo margin y padding</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<span id="a">div1</span>
<span id="b">div2</span>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos37.css"

Código: [Seleccionar]
body {
padding: 400px;
}
#a, #b {
width: 250px;
margin: 20px;
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 0 60px;
}
/* Ancho de cada div=div+border(10px+40px)+padding(45px+60px) */
/* Alto de cada div=div+border(15px+10px)+padding(30px+0px) */
Título: Re:diferencia entre padding y margin CSS cómo dejar margen todas direccion CU01029D
Publicado por: Ogramar en 14 de Enero 2016, 16:21
Buenas dimiste

No has cumplido lo que pedía el ejercicio, el ejercicio pedía crear dos elementos div de 250px de anchura y tú has creado span a y b y le has aplicado estilos a los span; he intentado visualizarlo y no se ve bien en mi navegador.

Deberías rehacer completamente este ejercicio, si quieres puedes guiarte por la solución propuesta en https://www.aprenderaprogramar.com/foros/index.php?topic=3159.0

Salu2
Título: Re:diferencia entre padding y margin CSS cómo dejar margen todas direccion CU01029D
Publicado por: Dimitar Stefanov en 15 de Enero 2016, 18:31
Ogramar, tines toda la razón. He corregido el ejercicio. Gracias. (he utilizado el enlace para guiarme).

Quedará así:

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,curso">
<link rel="stylesheet" type="text/css" href="estilos37.css">
<title>Ejemplo margin y padding</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div>
<div id="b">div2</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos37.css"
Código: [Seleccionar]
#a, #b {
display: inline-block;
width: 250px;
margin: 20px;
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 0 60px;
}
/* Ancho de cada div=div+border(10px+40px)+padding(45px+60px) */
/* Alto de cada div=div+border(15px+10px)+padding(30px+0px) */