Summary
This chapter covers how to control CSS element spacing using Bootstrap’s standardized margin (`m-{side}-{size}`) and padding (`p-{side}-{size}`) utility classes, eliminating the need for custom CSS rules.

General domain of usage
Front-end web development (web UI layout design)

# Marges
Les marges en CSS contrôlent l’espace entre les éléments et les bords extérieurs de leurs conteneurs. Avec Bootstrap, les marges peuvent être facilement ajustées à l’aide de classes utilitaires, supprimant ainsi le besoin de CSS personnalisé.

## Classes de marge
Bootstrap propose un ensemble de classes utilitaires pour les marges suivant une convention de nommage cohérente :
```
m-{side}-{size} 
```


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TWFyZ2lucyBhbmQgUGFkZGluZ3MgRXhhbXBsZSAxPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gYG10LTNgOiBBZGRzIGEgbWFyZ2luIG9mIDFyZW0gdG8gdGhlIHRvcCBvZiBhbiBlbGVtZW50LiAtLT4KICAgIDxkaXYgY2xhc3M9Im10LTMiPkNvbnRlbnQgd2l0aCB0b3AgbWFyZ2luPC9kaXY+CgogICAgPCEtLSBgbXgtNGA6IEFkZHMgYSBtYXJnaW4gb2YgMS41cmVtIGhvcml6b250YWxseSAoYm90aCBsZWZ0IGFuZCByaWdodCkgdG8gYW4gZWxlbWVudC4gLS0+CiAgICA8ZGl2IGNsYXNzPSJteC00Ij5Db250ZW50IHdpdGggaG9yaXpvbnRhbCBtYXJnaW5zPC9kaXY+CgogICAgPCEtLSBgbXktMmA6IEFkZHMgYSBtYXJnaW4gb2YgMC41cmVtIHZlcnRpY2FsbHkgKGJvdGggdG9wIGFuZCBib3R0b20pIHRvIGFuIGVsZW1lbnQuIC0tPgogICAgPGRpdiBjbGFzcz0ibXktMiI+Q29udGVudCB3aXRoIHZlcnRpY2FsIG1hcmdpbnM8L2Rpdj4KCiAgICA8IS0tIGBtLWF1dG9gOiBDZW50ZXJzIGFuIGVsZW1lbnQgaG9yaXpvbnRhbGx5IGJ5IGFwcGx5aW5nIGF1dG9tYXRpYyBsZWZ0IGFuZCByaWdodCBtYXJnaW5zLiAtLT4KICAgIDxkaXYgY2xhc3M9Im0tYXV0byI+Q2VudGVyZWQgY29udGVudDwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

# Espacements internes (Paddings)
Les espacements internes en CSS déterminent l’espace entre le contenu d’un élément et ses bordures. Avec Bootstrap, il est facile de contrôler ces espacements grâce aux classes utilitaires, ce qui permet de maintenir une cohérence dans la disposition sans recourir à du CSS personnalisé.


## Classes d’espacement interne
Bootstrap propose un ensemble de classes utilitaires pour les espacements internes, suivant une convention de nommage cohérente :
```
p-{side}-{size}
```
Les variantes pour `{side}` et `{size}` sont identiques à celles utilisées pour la marge.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TWFyZ2lucyBhbmQgUGFkZGluZ3MgRXhhbXBsZSAyPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gYHB0LTNgOiBBZGRzIHBhZGRpbmcgb2YgMXJlbSB0byB0aGUgdG9wIG9mIGFuIGVsZW1lbnQuIC0tPgogICAgPGRpdiBjbGFzcz0icHQtMyI+Q29udGVudCB3aXRoIHRvcCBwYWRkaW5nPC9kaXY+CgogICAgPCEtLSBgcHgtNGA6IEFkZHMgaG9yaXpvbnRhbCBwYWRkaW5nIG9mIDEuNXJlbSAoYm90aCBsZWZ0IGFuZCByaWdodCkgdG8gYW4gZWxlbWVudC4gLS0+CiAgICA8ZGl2IGNsYXNzPSJweC00Ij5Db250ZW50IHdpdGggaG9yaXpvbnRhbCBwYWRkaW5nPC9kaXY+CgogICAgPCEtLSBgcHktMmA6IEFkZHMgdmVydGljYWwgcGFkZGluZyBvZiAwLjVyZW0gKGJvdGggdG9wIGFuZCBib3R0b20pIHRvIGFuIGVsZW1lbnQuIC0tPgogICAgPGRpdiBjbGFzcz0icHktMiI+Q29udGVudCB3aXRoIHZlcnRpY2FsIHBhZGRpbmc8L2Rpdj4KCiAgICA8IS0tIGBwLTVgOiBBZGRzIHBhZGRpbmcgb2YgM3JlbSB0byBhbGwgc2lkZXMgb2YgYW4gZWxlbWVudC4gLS0+CiAgICA8ZGl2IGNsYXNzPSJwLTUiPkNvbnRlbnQgd2l0aCB1bmlmb3JtIHBhZGRpbmc8L2Rpdj4KCiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Explorez les principes fondamentaux du framework CSS Bootstrap et découvrez les secrets pour concevoir rapidement et efficacement des sites web réactifs et visuellement attrayants. Grâce à une exploration pratique des principales utilitaires et à la mise en œuvre de composants puissants, vous acquerrez une expérience pratique précieuse pour optimiser votre flux de travail de développement web à l'aide de la boîte à outils polyvalente de Bootstrap.

Explorez l'essence de Bootstrap et son évolution depuis sa création jusqu'à aujourd'hui, évaluez ses avantages et inconvénients, et comprenez les prérequis pour une mise en œuvre efficace.

Explorer les options d'installation de Bootstrap. Choisir entre une intégration rapide via le Content Delivery Network (CDN) ou une approche plus personnalisée avec le Node Package Manager (NPM).

Acquisition de compétences dans les éléments clés de Bootstrap, y compris le système de grille polyvalent, la typographie nuancée, l'utilisation dynamique des boutons, la gestion précise des marges et des espacements, ainsi que la création de formulaires efficaces pour une interaction utilisateur fluide.

Améliorez vos compétences Bootstrap avec des sujets avancés couvrant les menus de navigation dynamiques, la gestion réactive des images, les mises en page polyvalentes de cartes, les modales interactives et les carrousels attrayants pour des expériences utilisateur captivantes.

Créez un site portfolio en utilisant le framework Bootstrap avec notre accompagnement. Exploitez les fonctionnalités puissantes de Bootstrap. Cette section pratique vous aidera à présenter vos compétences, projets et réalisations.

Gestion des Marges et des Espacements Internes

Marges

Classes de marge

{side} peut être :

{size} peut être :

Espacements internes (Paddings)

Classes d’espacement interne