Discussion :

[Tamzoro]

Bonsoir,

Je commence à apprendre le CSS mais j'ai dû mal parfois à différencier certaines propriétés. Par exemple, je ne vois pas trop la différence entre un height ou un padding?

Par exemple, dans un topbar j'utiliserai plutôt un padding à la place d'un height mais le résultat demeure pourtant identique.

1er solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.topbar-logo {
	display: block;
	text-align: left;
	font-size: 24px;
	padding: 11px 11px;
}

2ème solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.topbar-logo {
	display: block;
	text-align: left;
	font-size: 24px;
	height: 50px;
	padding-top: 15px;
	padding-left: 20px;
}

Est-ce que pour vous la solution n°2 est une erreur?

[Invité]

Bonjour,

• Glossaire des propriétés CSS
• padding
• margin
• border
• height
• ...

[Tamzoro]

Bonjour,

Merci pour les liens, j'avais déjà jeté un coup d'oeil dans la doc mais je trouve que c'est pas trop clair.

Padding : Permet de définir l’espacement interne d’un élément
Height : Permet de définir la hauteur d’un élément

Je n’arrive toujours pas à différencier les deux propriétés, pour moi elles font la même chose. D’habitude, j’utilisai un height pour une topbar mais dans certains tutoriels sur youtube on utilise plutôt un padding.

[Invité]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="test1">Hello</div>
<div id="test2">The World</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#test1 {
  display:inline-block;
  background:green;
  height:100px;
}
#test2 {
  display:inline-block;
  background:yellow;
  padding:100px;
}

Ça te parait toujours "identique" ?

[Tamzoro]

Merci à toi, j'ai compris maintenant.