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

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 >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/coder-en-css-largeur-et-hauteur.html Votes: 4.5 / 5 étoiles - 35 vote(s) et 10 commentaires