28172 sujets

CSS et mise en forme, CSS3

Aide en CSS pour espacer des <div> entres-elles

Bonjour à tous je dois réaliser un petit exercice de création d'une page web simple.
Je suis débutant. Seulement les bases.
Depuis quelques heures je bloque sur un petit truc tout bête.
J'ai une en-tête avec image, suivie de 4 éléments en ligne (voir wireframe)
J'aimerai pouvoir espacés les 4 éléments, les uns des autres et espacés comme sur le wireframe l'en tête et les éléments.

Vous trouverez en pièce jointe une photo du Wireframe, de mon code et de la page php.

Bonne journée! Smiley cligne 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Mon premier site</title>
    [code=css]<style>

        header {
            display: block;
            background-image: url(Image/montagne-header.jpg);
            background-size: cover;
            height: 400px;
            background-repeat: no-repeat;
            text-align: center;
            background-position: center;
            padding-bottom: 2px;


        }

        section.articles {
            display: flex;
            

        }

        div.img {
            border: 1px solid black;
            width: 25%;
            height: 300px;
         
        }

        div.txt {
            border: 1px solid black;
            width: 25%;
            height: 300px;
        }
    </style>
</head>


<body>
<header>
<h1>Titre du site</h1>
</header>
<section class="articles">
<div class="img"></div>
<div class="txt"></div>
<div class="img"></div>
<div class="txt"></div>
</section>

</body></html>[/code]

upload/1588584254-79768-capturedancran3.png
Bonjour,
pour faire ce que tu veux tu dois utiliser margin-right et margin-left et tu mets ta valeur. Si tu débutes vas sur le site de pierre Giraud il devrait y avoir de quoi t'aider,en espérant avoir pu aider.
Bonjour,

Tout d'abord une petite remarque sur ton CSS actuel. Tu définis une largeur width:25%; je te conseille de compléter par une propriété flex: 0 0 25%;, qui regroupe flex-basis, flex-grow et flex-shrink. Sinon la largeur de tes blocs risquent de changer en fonction de leur contenu.

Pour espacer les blocs, il faudra d'abord réduire leur largeur parce que 4 x 25% ça ne laisse pas de place pour les marges. Ensuite la propriété justify-content: space-between; devrait résoudre ton problème.
Modifié par Alainpre (04 May 2020 - 16:18)
Sujet clos
Aller à