Rythme vertical et ligne horizontale hr

Bonjour,
Petit souci de décalage pour maintenir le rythme vertical.
Je pensais qu'il fallait déduire de la marge superieure la largeur de la bordure; mais ça ne fonctionne pas toujours.

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit; 
}

body {
    font-size: 1rem;
    line-height: 1.5;  /* 24px */
}

hr { 
   height: 0px;
    border: 0;     
    border-top: 4px solid;
    margin-top: 20px;
    margin-bottom: 24px;
} 

Modifié par cpalo (30 Jun 2023 - 12:31)

Bonjour,

C'est probablement du à l'effet de fusion de marges,
en faisant :

hr {
 /* box-sizing herité à border-box */
  height: 4px;
  border: 0;
  border-top: 4px solid;
  margin: 44px 0 0px;
}

il n'y pas cet effet et les( 20 + 4 + 24) pixels sont respectés.
note le border-top doublé avec height qui fixe bien la hauteur à 4px selon le box-sizing hérité

Cdt

Effectivement il y a sans doute l'effet de la fusion des marges car cette ligne horizontale est comprise entre deux paragraphes (margin-top: 0; margin-bottom: 24px).
Mon but est que cette ligne soit centrée entre les deux paragraphes et j'avais imaginé:

hr { 
    height: 4px;
    border: 0;
    border-top: 4px solid;
    margin-top: 22px;	
    margin-bottom: 22px;
} 

Mais bien entendu ça ne fonctionne pas.
Si la ligne est mince , cela se voit à peine ( mais ce n'est pas correct car le but n'est pas atteint):

hr { 
    height: 2px;
    border: 0;
    border-top: 2px solid;
    margin-top: 24px;	
    margin-bottom: 22px;
} 

Voilà je pense avoir trouver une solution, qui convient lorsque la ligne est assez épaisse ou lorsqu'on insére du texte au milieu.

hr { 
    height: 8px;
    border: 0;
    border-top: 8px solid;
    margin-top: 32px;	
    margin-bottom: 32px;
} 

32px + 8px + 32 px = 72px soit 3 lignes (24px) respectant ainsi le rythme vertical et centrant la ligne horizrontale.

Pour finaliser ce projet c'est d'avoir un texte précédent d'une ligne à droite et à gauche.
Le résultat est presqu'atteint, mais la valeur top:-19px a été obtenue en tatonnant!
(Dans la version finale du code précédent j'utilise une variable --hr-size: 8px;)

hr {
.... code précédent
    overflow: visible;
    text-align: center;
}
 hr::after {   
    content: 'CONTENT';
    display: inline-block;
    height: 24px;
    font-size: 24px;
    vertical-align: middle;
    padding: 0 16px;
    position: relative;
    top: -19px;
    background: yellow;
}

Bonsoir,

un transform:translate() serait peut-être plus judicieux ?

un exemple reprenant ma proposition précédente (marge vertical uniquement en top) avec des variables CSS pour tester en modifiant font-size, line-height et épaisseur de bordure. https://codepen.io/gc-nomade/pen/jOQmaPy exemple avec paragraph et hr .

edit: mise à jour en ajoutant le pseudo

Cdt
Modifié par gcyrillus (02 Jul 2023 - 15:27)

Attention que c'est toujours délicat d'ajouter du contenu via CSS, si c'est dans un but de style ok, mais si ça apporte du contenu à ta page, l'avoir dans une balise HTML adéquate sera mieux