CSS - DUDA CSS, PADDING Y MARGIN

 
Vista:
Imágen de perfil de andres
Val: 6
Ha aumentado su posición en 16 puestos en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por andres (5 intervenciones) el 29/04/2019 23:53:51
Hola chicos, ando haciendo un menú con html y css y en algunos casos no me queda clara la diferencia entre margin y padding. Supuestamente el margin es el espacio existente entre un elemento con otro ¿pero con cual? ¿con el que le contiene? porque si el padding es el espacio que existe entre el contenido y su contenedor puede acabar siendo lo mismo que el padding ¿no?

Expongo el ejemplo del que tengo dudas. Si modifico el margin del menu (".menu margin:20px 20px;") desde CSS, ¿estoy modificando el espacio entre que y que? y si modifico su padding ¿qué estoy modificando? ¿No coinciden?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<html lang="en">
 
<head>
<title>titulo de nuestra primera web</title>
     <meta charset="UTF-8">
     <link rel="shortcut icon" type="image/x-icon" href="lopera.jpg.ico">
     <meta name="description" content="Pero no intentaré explicarlos. Si para mí han sido horribles, para otros resultarán menos espantosos que barrocos"/>
     <meta name="keywords" content="diseño, paginas web, desarrollo"/>
 
 
     <link rel="stylesheet" type="text/css" href="css/menu2.css"/>
 
</head>
 
<body>
 
 
<ul class="menu">
 
<li><a href="#">Inicio</a></li>
<li><a href="#">Recepcion</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Oficina</a></li>
<li><a href="#">Departamento</a></li>
 
</ul>
 
 
<body>
 
</html>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.menu{
	background:grey;
	width:100%;
	list-style:none;
	padding:0px 0px;
	margin:0px 0px;
 
}
.menu li{
	display:inline-block;
}
 
.menu li a{
 
	padding:10px 80px;
	display:inline-block;
	color:white;
 
}
 
.menu li a:hover{
	background:#ccc;
	color:000#;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por joel (252 intervenciones) el 30/04/2019 11:06:48
Hola Andres, aquí te adjunto una imagen para que te quede mas claro

1

Tu defines el elemento verde... y puedes indicar la separación con su contenido (padding), o la separación con su contenedor (margin).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Saúl
Val: 63
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por Saúl (9 intervenciones) el 30/04/2019 13:39:11
Hola Andrés,

El padding, como bien explica Joel, es el espacio entre el contenido y el borde interno del contenedor.

El margin es el el espacio del borde hacia el exterior (otro elemento).

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de andres
Val: 6
Ha aumentado su posición en 16 puestos en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por andres (5 intervenciones) el 30/04/2019 21:06:04
Sí, pero fijaos en mi CSS, si modifico el padding de menu.li a:hover ¿cuál es su contenedor? el menu li a? el menu li? el menu? Siempre el contenedor es el elemento padre mas cercano? Y el margin que seria en ese caso?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por joel (252 intervenciones) el 01/05/2019 08:57:41
Desde .menu li a, su contenedor es .menu li, ya su contenido es el texto que se encuentra dentro del enlace.

No se si se entiende correctamente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Saúl
Val: 63
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

DUDA CSS, PADDING Y MARGIN

Publicado por Saúl (9 intervenciones) el 02/05/2019 10:11:43
El margin sería el espacio entre los distintos items (li); desde el borde de uno al borde del otro.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar