28172 sujets

CSS et mise en forme, CSS3

Bonjour
Je cherche à régler l'espacement de deux éléments qui sont stylés display:table-cell dans un élément parent stylé display:table, lui même dans un <aside> qui a un un padding de 0.5em.
Ce que j'obtiens pour le moment:
http://tests.osirisnet.net/migration/outils/cell-padding.png
Ce que je voudrais arriver à faire, si possible uniquement en modifiant le CSS, c'est que les images d'un bloc de deux soient séparées de 0.5em.
Comme on ne peut pas mettre de margin dans un élément stylé table-cell, il faut jouer sur border-spacing et border-collapse du conteneur.
Pour l'instant, ou bien j'arrive à les espacer entre eux, mais ils sont également espacés du bord de leur conteneur; ou bien ils sont correctement alignés sur leur conteneur, mais il n'y a pas d'espace entre eux.
Une idée?
Voici la page, ce qui vous donnera accès aux différentes feuilles de style CSS qu'elle utilise:
http://tests.osirisnet.net/dieux/ahmes-nefertary_amenhotep1/@ahmes-nefertary_amenhotep1_02.htm

Merci de votre aide
Modifié par PapyJP (03 Aug 2016 - 17:02)
Bonjour !

Dans common.css, la propriété border-spacing est à 0 pour
.framed .row

Si je donne une valeur positive, les images s'écartent... C'est le but recherché ?

Smiley smile
Administrateur
Bonjour,

les marges extérieures sont embêtantes avec border-spacing Smiley decu
Ma solution préférée est de me débrouiller avec border-spacing: 0 et jouer sur la largeur de chaque enfant de "cellule" (l'élément en display: table-cell) et lui faire porter la bordure.

Ici j'arrive à un bon résultat avec des marges négatives ET l'utilisation de calc() sur le parent.
Autant utiliser flexbox dans ce cas...
.framed .row {
  border-spacing: 0.5em;
  margin: 0 -0.5em;
}
.cluster .row {
  width: calc(100% + 0.5em);
}

Je me suis probablement emmêlé entre 0.5em et un multiple, manque d'habitude (On a 3x0.5em pris par border-spacing nan ? gauche, centre et à droite donc sur le parent en display: table => calc(100% + 1.5em) a priori)
Merci de t'intéresser à ce problème. Je suis malheureusement pris par des points plus urgents ces jours ci.
De façon temporaire j'ai traité ça par une <table> avec des cellules au lieu de <figure> stylées, mais il faudra que je trouve une solution un peu plus responsive pour la version finale.