CSS - width, height, margin, padding

Pour saisir rapidement les classes les plus utilisées, j'ai réservé des noms très courts

  • la première lettre est le type de propriété CSS : w: width, m: margin, p: padding
  • la deuxième lettre peut avoir 2 sens :
    • indicateur de taille d'écran : s pour small, smartphone et m pour medium, moyen
    • le coté concerné : l: left, t: top, r: right, b: bottom, h: horizontal (left & right), v: vertical (top & bottom)
  • la troisième lettre est le coté en cas de mention d'une taille d'écran.
  • le nombre ou auto indique la valeur ou l'indice de la valeur.

Quelques exemples pour comprendre le principe:

  • w6 : width:6/12=50% → largeur du bloc en pourcentage
  • ws6 → idem mais seulement sur mobile (s)
  • m1 : margin: 10px; → l'indice 1 est défini à 10px dans les variables SCSS
  • mm1 → idem mais seulement sur tablette (m)
  • mst2 : margin-top: 20px → marge top sur mobile (s)
  • psr1 : padding-right:10px → padding de 10px sur mobile (s)
  • mcenter : margin-left & margin-right sur auto pour centrer un bloc

WIDTH - largeur des blocs sur la base d'une grille de 12 colonnes

Syntaxe : w[ecran]largeur en % w[s|m]0|1|2|3|4|5|6|7|8|9|10|11|12|auto|25|50|75|100

Une largeur de zéro est équivalent à un display:none. Exemple: ws0 = invisible sur mobile

avec w4, j'occupe le tiers de l'espace
w3 wm4 ws0. Je disparais sur mobile
w2
wauto, la place restante
<div class="cell-row tc">
  <div class="cell bg-bleuClair w4 pv2">avec w4, j'occupe le tiers de l'espace</div>
  <div class="cell bg-vert w20 wm4 ws0" >w20 wm4 ws0. Je disparait sur mobile</div>
  <div class="cell bg-orange w2">w2</div>
  <div class="cell bg-violet wauto">wauto, la place restante</div>
</div>

Note : par commodité, les classes 25, 50, 75 et 100 indiquent la largeur du bloc en pourcentage.

MARGIN - les marges autour des blocs

Syntaxe : p[ecran][coté][dimension] m[s|m][l|t|r|b|h|v]0|1|2|3|center|left|right

m0
m1
w50 mcenter
mt3 ms0
<div class="bloc tc">
  <div class="w3 float-left bd-orange">
    <div class="m0 bg-orange">m0</div>
  </div>
  <div class="w3 float-left bd-bleuClair">
    <div class="m1 bg-bleuClair">m1</div>
  </div>
  <div class="w3 float-left bd-orange">
    <div class="mcenter w50 bg-orange">w50 mcenter</div>
  </div>
  <div class="w3 float-left bd-bleuClair">
    <div class="mt3 ms0 bg-bleuClair">mt3 ms0</div>
  </div>
</div>

m-child-raz supprime la marge haute du premier enfant et la marge basse du dernier enfant d'un bloc. Cette règle est très pratique dans une boite, pour éviter que les règles des enfants soient prioritaires sur celles du parent.

Titre

Contenu

<div class="bloc bd-bleuClair tc">
  <h2>Titre</h2>
  <p>Contenu</p>
</div>

Titre

Contenu

<div class="bloc m-child-raz bd-bleuClair tc">
  <h2>Titre</h2>
  <p>Contenu</p>
</div>

PADDING - les marges internes aux blocs

Syntaxe : p[ecran][coté][dimension] p[s|m][l|t|r|b|h|v]0|1|2|3

p0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam in altera philosophiae parte. Quo modo? Duo Reges: constructio interrete. Laboro autem non sine causa.
p1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam in altera philosophiae parte. Quo modo? Duo Reges: constructio interrete. Laboro autem non sine causa.
ph3 psh1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam in altera philosophiae parte. Quo modo? Duo Reges: constructio interrete. Laboro autem non sine causa.
pv1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam in altera philosophiae parte. Quo modo? Duo Reges: constructio interrete. Laboro autem non sine causa.
<div class="fg-row fg-gap fg-vtop">
  <div class="fg-c3 fg-cm5 fg-cs6 bd-orange p0"><b>p0</b> ... Laboro autem non sine causa.</div>
  <div class="fg-c3 fg-cm7 fg-cs6 bd-orange p1"><b>p1</b> ...</div>
  <div class="fg-c3 fg-cm6 bd-orange ph3 psh1"><b>ph3 psh1</b> ...</div>
  <div class="fg-c3 fg-cm6 bd-orange pv1"><b>pv1</b> ...</div>
</div>

HEIGHT - une hauteur minimale en pixels

Pour réserver une hauteur minimale en pixels, on dispose d'une classe responsive minh[s|m]0|100|200|400 et hscreen

.minh0
.minh100
.minh200
.minh400
.hscreen
j'occupe la hauteur de la fenêtre du navigateur

Et une hauteur maximale

La même chose pour une hauteur maximale en pixels avec ajout d'un ascenseur maxh[s|m]0|100|200|400

.maxh100

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit. Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse contraria. Ego vero isti, inquam, permitto. Duo Reges: constructio interrete. Ita relinquet duas, de quibus etiam atque etiam consideret. Aeque enim contingit omnibus fidibus, ut incontentae sint. Longum est enim ad omnia respondere, quae a te dicta sunt. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate.

Hanc ergo intuens debet institutum illud quasi signum absolvere. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Que Manilium, ab iisque M. Quid de Platone aut de Democrito loquar? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Quod autem satis est, eo quicquid accessit, nimium est; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Videmus in quodam volucrium genere non nulla indicia pietatis, cognitionem, memoriam, in multis etiam desideria videmus. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Quid est enim aliud esse versutum?

Profectus in exilium Tubulus statim nec respondere ausus; Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quid est igitur, inquit, quod requiras? Eam tum adesse, cum dolor omnis absit; Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis.

Quod autem meum munus dicis non equidem recuso, sed te adiungo socium. Quid autem habent admirationis, cum prope accesseris? Etenim semper illud extra est, quod arte comprehenditur. Non perfecti autem homines et tamen ingeniis excellentibus praediti excitantur saepe gloria, quae habet speciem honestatis et similitudinem. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Velut ego nunc moveor. Quid ad utilitatem tantae pecuniae?