28111 sujets

CSS et mise en forme, CSS3

[Résolu] établir les dimensions d'une div par ses marges

Bonjour,
J'ai parfois lu, dans divers forum ou article, l'établissement des dimensions d'une div dans son contenant par l'emploi des marges, comme:
#div1{margin: 100px 200px 50px 300px;}
dont le résultat est l'extension de la div jusqu'aux marges définies.

Quand j'essaie de le refaire, j'échoue lamentablement et je n'arrive pas à trouver la condition nécessaire (cad la/les autre(s) clause(s) CSS nécessaire(s)) au bon fonctionnement de cette méthode.

Pourriez-vous m'indiquer une piste ?

Merci par avance,
Roland
Modifié par speedytools (11 Sep 2019 - 21:54)
Administrateur
Hello,

La propriété "margin" n'agit que sur les marges externes à un élément. Elle ne peut pas le dimensionner. Par contre "padding" est capable d'agrandir les marges internes.
Je ne sais pas si c'est ce que tu souhaites.
Bonjour,
Merci Basacable, merci Raphaël,

Avec toutes mes excuses : j'avais tellement la tête dedans que j'ai eu l'impression d'être clair dans mon énoncé, ce qui ne fut pas le cas.

Je cherche à ce que la div concernée occupe TOUTE la place comprise entre les marges indiquées, soit :
<style>
  body {
    background:red;
  }
  .div {
    background:green;
    margin: 100px 200px 50px 300px;
  }
</style>

<body>
  <div class='div'>
  </div>
</body>

donnerait ceci :
https://forum.alsacreations.com/upload/1568276130-67476-divmargin.png
Et si la règle "margin" est insuffisante, que dois-je ajouter pour obtenir ce résultat (cad forcer la div à occuper tout l'espace entre les marges) ?
Merci par avance de votre temps et de votre attention.
Roland
Modifié par speedytools (12 Sep 2019 - 13:35)
Administrateur
Je suis désolé, je ne comprends pas ta question.
Peux-tu donner une illustration de ce que tu souhaites obtenir ?

Note : ton code ne fonctionne pas car tu as écrit "classe" au-lieu de "class" dans ton HTML, et tu as "margin;" qui traîne dans ton CSS
Modérateur
Salut,

La seule chose qui bloque icic c'est la hauteur car par defaut la div prend tout la largeur du body moins les marge. En hauteur ce n'est pas le cas comme l'a dit bacasable.

Pour palier à ca il y a plusieurs solutions selon ton but final :
- Donner une hauteur fixe height: 200px;
- donner une hauteur calculée height: calc(100% - 150px)
- positionnement en flex https://jsfiddle.net/undless/p6k9e2w4/
etc
Sujet clos
Aller à