Probléme de largeur

Hello à tous,

Avant tout je suis junior, soyez indulgent

Je rencontre un souci au niveau de mes button, j'ai attribué une class à mes " button afin d'avoir le même padding, mais ça ne marche pas et au contraire pour les deux derniers button le css prends en compte la largeur du texte et non le padding attribué.

Avez-vous déjà rencontré ce problème ? Je souhaite une piste , mais je fais tout de même des recherches à coté sur les sites w3school ect

 <section>
        <h2>Fonctionnement</h2>

        <div class="First-section">
          <div>
            <span class="number">1</span><i class="fas fa-mobile-alt"></i
            ><button class="btn">Choissisez le thème du restaurant </button>
          </div>
          <div>
            <span class="number">2</span><i class="fas fa-list-ul"></i
            ><button class="btn">Composez votre menu</button>
          </div>
          <div>
            <span class="number">3</span><i class="fas fa-store"></i>
            <button class="btn">Dégustez au restaurants</button>
          </div>
        </div>
      </section>

.btn {
  border: 2px solid #f0f2f2;
  border-radius: 1rem;
  padding: 15px 50px;
  font-weight: bold;
  background: #f0f2f2;
  box-shadow: 1px 1px 12px #ded9d9;
  margin: 10px;
}

Bonne soirée à vous

Bonjour,

Merci pour les pistes , j'ai rectifié les espaces et les tailles des favicon mais, ça ne bouge pas, je vais voir si j'ai pas un souci dans mes margin et padding.

Cdt,

Bonjour,

je ne sais pas quel est le résultat souhaité et n'ai pas compris largeur du texte vs padding (sans forcer de largeur, la largeur d'un élément c'est le contenu + le padding + les bordures) mais quelques pistes :
- dans les Devtools du navigateur (F12), préciser que l'on souhaite voir les styles par défaut, ceux du navigateur (dans Firefox : F12 puis F1 puis Inspecteur / cocher "Afficher les styles du navigateur").
- ajouter des background-color et des outline sur tous les éléments

.First-section { outline: 1px solid red; }
.First-section > div { outline: 1px dashed blue; }
.number { background-color: pink; }
.fas { background-color: lightblue; }
.btn { outline: 1px dotted darkgreen; }

edit:
- est-ce que l'élément est un flex item ou un grid item ? Ca se voit dans les Devtools avec la petite pastille / cartouche "(flex)" ou "(grid)" dans les Devtools de Firefox et je crois à présent dans les autres navigateurs également.
Modifié par Felipe (26 Apr 2021 - 14:30)