Autor Tema: diferencia entre padding y margin CSS cómo dejar margen todas direccion CU01029D (Leído 2808 veces)

Dimitar Stefanov · « **en:** 12 de Enero 2016, 20:52 »

Mi códigos.

Código HTML:

<!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) */

Ogramar · « **Respuesta #1 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

Dimitar Stefanov · « **Respuesta #2 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) */

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

Noticias: