HELP ! Création d'une page internet avec langage CSS

Bonjour à tous,

Je débute dans le langage CSS et HTML et dans le cadre de mes études je dois reproduire une page internet créée par mon prof.
Je travaille sur brackets et j'aimerai savoir comment reproduire cette effet de bloc sur fond blanc avec une bordure de séparation entre les catégories comme sur la photo. Pourriez-vous m'aider à comprendre quels arguments CSS je dois utiliser pour obtenir cet effet ?

Merci d'avance pour vos réponses !
Modifié par charlottebnv (12 Dec 2020 - 22:25)

Bonjour,
Les deux éléments de contenu sur fond blanc sont tout simplement séparés par une marge. Par exemple :

.monElement {
  margin-bottom: 1em;
}

Il existe d'autres méthodes (comme les gouttières sous grid ou flex), mais il vaut mieux commencer par la base.

Bonjour,
L'idée principale est d'avoir un conteneur principal avec une largeur maximum que tu vas centrer, et effectivement après des éléments avec un fond blanc et une marge vers le bas.

.main-wrapper{
    max-width: 980px;
    margin: 0 auto;
}
.monElement {
 background: #FFF;
  margin-bottom: 1em;
}