GusCSS - Documentation des Paddings et Marges

Exemple de Padding

Image 1
Carte avec Padding

Cette carte a un padding de 3 unités.

Image 2
Carte avec Padding

Cette carte a un padding de 5 unités.

Image 3
Carte avec Padding

Cette carte a un padding de 1 unité.

Exemple de Code

<!-- Exemple de Padding -->
<div class="row">
    <div class="col-md-4">
        <div class="card m-3 p-3">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 1" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Padding</h5>
                <p class="card-text">Cette carte a un padding de 3 unités.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-3 p-5">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 2" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Padding</h5>
                <p class="card-text">Cette carte a un padding de 5 unités.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-3 p-1">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 3" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Padding</h5>
                <p class="card-text">Cette carte a un padding de 1 unité.</p>
            </div>
        </div>
    </div>
</div>

Exemple de Margin

Image 1
Carte avec Margin

Cette carte a une marge de 3 unités.

Image 2
Carte avec Margin

Cette carte a une marge de 5 unités.

Image 3
Carte avec Margin

Cette carte a une marge de 1 unité.

Exemple de Code

<!-- Exemple de Margin -->
<div class="row">
    <div class="col-md-4">
        <div class="card m-3">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 1" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Margin</h5>
                <p class="card-text">Cette carte a une marge de 3 unités.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-5">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 2" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Margin</h5>
                <p class="card-text">Cette carte a une marge de 5 unités.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-1">
            <img src="https://placehold.co/100x100" class="card-img-top" alt="Image 3" />
            <div class="card-body">
                <h5 class="card-title">Carte avec Margin</h5>
                <p class="card-text">Cette carte a une marge de 1 unité.</p>
            </div>
        </div>
    </div>
</div>