28123 sujets

CSS et mise en forme, CSS3

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)
Modérateur
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é Smiley cligne

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;
}
Modérateur
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)
Modérateur
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 Smiley smile