Largeur et Hauteur en CSS - Définir width et height
Taille des blocs CSS et hauteur ligne


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

Défintion des Largeur et Hauteur en CSS

code css taille Hauteur, largeur, le css vous permet de définir ses paramètres importants.

  • height : Hauteur
    • line-height : Hauteur d'une ligne
    • max-height : Hauteur maxium
    • min-height : Hauteur minimum
  • width : Largeur
    • max-width : Largeur maxium
    • min-width : minimum

Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d\'héritage sur ce lien)

Hauteur

Vous pouvez définir la hauteur d'un élément avec la propriété : height height: valeur;
Valeurs possibles:
  1. auto
  2. Valeurs en px
  3. Pourcentage

Voir un exemple :
Voici un exemple avec 30px
Voir le code CSS :
.feuille {height:30px; border-width:1; } Voir le code dans l'élément
<span class="feuille">Voici un exemple avec 30px</span>

Hauteur d'une ligne

code CSS Vous pouvez définir la hauteur d'une ligne avec la propriété : line-height line-height: valeur;

Valeurs possibles:
  1. normal
  2. nombre
  3. Valeurs en px
  4. pourcentage

Hauteur maxium

Vous pouvez définir la hauteur maximum d'une ligne avec la propriété : max-height max-height: valeur;

Valeurs possibles:
  1. none (rien)
  2. Valeurs en px
  3. percentage

Hauteur minimum

Vous pouvez définir la hauteur minimum d'un élément avec la propriété : min-height min-height: valeur;

Valeurs possibles:
  1. length
  2. percentage

Largeur

Vous pouvez définir la largeur d'un élément avec la propriété : width width: valeur;

Valeurs possibles:
  1. auto
  2. Valeurs en px
  3. pourcentage

Largeur Max

Vous pouvez définir la largeur maximum d'une ligne avec la propriété :max-width max-width: valeur;

Valeurs possibles:
  1. none
  2. Valeurs en px
  3. pourcentage

Largeur Min

Vous pouvez définir la largeur minimum d'un élément avec la propriété : min-width min-width: valeur;

Valeurs possibles:
  1. length
  2. percentage

A savoir

Une hauteur plus petite que son contenu

Si le conteneur a une hauteur (height) plus petite que son contenu, sous Internet Explorer le contenu agrandit la hauteur, alors que Netscape / FireFox le contenu sort de la balise mais le conteneur est à la bonne taille.

Code CSS :
#conteneur{
								  width:200px;
								  height:50px;
								  border:1px solid #000000;
								}
								.contenu{
								  background-color:red;
								  margin:0 0 50px 0;
							}
Code HTML :
<div id="conteneur">
								<div class="contenu"> 
									Sous IE, j'agrandis mon parent
								</div>
														</div>




Dans le cas ou la hauteur du conteneur (parent) est véritablement plus petite que son contenu vous devez spécifier au parent la propriété overflow:hidden.

Dans le cas ou vous voulez que la hauteur du parent s'adapte au contenu, vous devez spécifier au parent la propriété height:auto Classification en CSS >>>

Le CSS en 3 questions/réponses - en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

🤔 Qu'est-ce que le CSS ?

CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.2 (100%) 58 votes