Réduire l'espace entre le texte et la bordure ?

Question

Réduire l'espace entre le texte et la bordure ?

Demandé el 17 de Juin, 2016: Quand la question a-t-elle été
132 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de créer une page de médias sociaux sur un portail web. Je souhaite que le texte situé au milieu de la page soit entouré d'une bordure relativement proche du texte. Cependant, chaque fois que j'ajoute une bordure dans ma feuille de style CSS, il semble qu'elle entoure toute la page plutôt que le texte. Existe-t-il un moyen de réduire l'espace entre le texte et la bordure ?

html,
body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.ben_buchanan {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 72px;
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFFFFF;
}
.fullstop {
  background: none;
  color: #FFFFFF;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0;
}

 <h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>

Voici à quoi il ressemble actuellement :

Voici le code sur pastebin .

Demandé el 17 de Juin, 2016 par Ben Buchanan

Answer 1

3 Réponses

Answer 2

1voto

rvighne Points 2382

Le site border s'applique à l'ensemble de la "boîte englobante" de l'élément. Puisque vous avez spécifié une largeur et une hauteur pour l'élément, la bordure se situera autour de cette zone.

La solution serait de créer un élément en ligne à l'intérieur de el .ben_buchanan et c'est l'élément qui contient effectivement le texte et la bordure.

Alors

<h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>

devient

<h1 class="ben_buchanan">
    <span class="inside_text">BEN BUCHANAN<mark class="fullstop">.</mark></span>
</h1>

Et vous appliquez la frontière à .inside_text .

Répondu el 17 de Juin, 2016 par rvighne (2382 Points )

Answer 3

0voto

David Chelliah Points 1120

Vous appliquez la bordure à la division H1, qui occupe 90 % de la hauteur de votre page. Une bordure autour de cette division apparaîtrait donc au bord de l'écran, et non autour de votre texte.

Dans votre cas, vous pouvez avoir un div enveloppant autour de votre balise H1 qui devrait avoir display:flex et la hauteur qui lui est définie. Utilisez ensuite vertical-align: middle; pour que tous les éléments de contenu intérieurs soient centrés verticalement.

H1 a un bloc d'affichage qui lui permet d'occuper toute la largeur de l'écran. Ainsi, pour avoir votre bordure à droite et à gauche du contenu. Faites votre H1 comme display:inline-block pour que l'alignement vertical ait ses effets sur elle. Et appliquer margin:0 auto qui devrait permettre de centrer le texte horizontalement.

Ainsi, votre texte sera finalement aligné au centre de la page (verticalement et horizontalement) avec la bordure qui l'entoure.

Vous pouvez augmenter l'espace autour de la bordure et du texte, en appliquant un padding au h1.

Regardez l'extrait ci-dessous

/* General */

html, body {
    background-color: #000000;

    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;

    overflow: hidden; /* Will hide anything on the x and y axis that goes outside of the element, so there would be no need for a scrollbar */
}

/* Classes */
.name-wrapper{
  align-items: center;
    display: flex;
    height: 90%;
    vertical-align: middle;
}

.ben_buchanan {
  border: 1px solid #ffffff;
    color: #ffffff;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-size: 72px;
   margin: 0 auto;
}

.fullstop {
    background: none;
    color: #FFFFFF;

    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
}

/* Animations */

@-webkit-keyframes pulsate {
    0% { 
        opacity: 0;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
    opacity: 0;
    }
}

/* Miscellaneous */

.disable_text_highlighting {
    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;  
    -o-user-select: none;
    user-select: none;
}

<!DOCTYPE html>

<html class="disable_text_highlighting">

    <style type="text/css"></style>
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link rel="favicon" href="favicon.ico"/>

    <head>
        <title>Ben Buchanan</title>
    </head>

    <body>
      <div class="name-wrapper">
        <h1 class="ben_buchanan">BEN BUCHANAN<mark class="fullstop">.</mark></h1>
        <div>
    </body>

</html>

Répondu el 17 de Juin, 2016 par David Chelliah (1120 Points )

Answer 4

0voto

gavsta707 Points 121

Vous pouvez d'abord définir le style de votre h1 comme suit :

<h1 style='border:2px black solid;'>BEN BUCHANAN<mark 
class="fullstop">.</mark></h1>

Ensuite, définissez l'affichage dans css comme :

h1{
   display:inline;
}

Cela devrait résoudre le problème de la bordure qui ne s'enroule pas autour du texte.

Répondu el 17 de Juin, 2016 par gavsta707 (121 Points )

Réduire l'espace entre le texte et la bordure ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Réduire l'espace entre le texte et la bordure ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: