le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Width à  100% avec padding : Lorsque l'élément est plus large que prévu

Si l'on affecte à un élément div une largeur à 100% de son parent et que ce div à un padding:10px, on se retrouve en fait avec un div de largeur 100% + 20px ! 

Pas glop.

La solution pour avoir un div a 100% exactement est simple et rapide , et se résume par l'utilisation de la propriété CSS box-sizing :

div{width:100%; padding:10px;box-sizing: border-box;}

 

publié le 25/11/2015 par Memo Web
Commenter le Mémo :

Utiliser des constantes dans un fichier CSS
Une bordure en pointillés en CSS3 - Effet couture.
Générer un fichier CSS en PHP
Rajouter une image en CSS avec la balise :before ou :after
@font-face ou Comment choisir une police non standard
Comment rajouter un séparateur entre les items d'une liste
Les transitions en CSS3 : rotation d'un élément - rotate()
Enlever la bordure qui apparaît au survol d'une image sur un lien hypertexte
Lorsque le margin appliqué à un enfant déplace son parent
Effet carnet de notes en CSS 3 - empilement de feuilles
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos