mettre une bordure autour de l'en-tête et le paragraphe

Je suis en train de mettre une bordure autour de la tête et de l'alinéa. Actuellement, j'ai deux frontière autour de l'en-tête et le paragraphe. Comment puis-je mettre une bordure autour d'eux?

<style type="text/css">
h1{
 font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
</style>

<h1>Hello</h1>
<p>World</p>
  • Les mettre dans un récipient et donner le conteneur de la frontière.
  • Merci Harry, il a travaillé!
InformationsquelleAutor Ninja | 2016-06-14
  1. 2

    Comme Harry suggéré ci-dessus, il suffit de les ajouter à l'intérieur d'une enveloppe et de définir votre style sur le papier à la place. Comme:

    CSS:

    div {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

    HTML:

    <div>
  <h1>Hello</h1>
  <p>World</p>
</div>

    Alternativement, si vous ne pouvez pas ou ne voulez pas changer votre balisage, vous pouvez simplement supprimer en bas à gauche et à droite border et border-radius pour votre h1 élément, et aussi enlever le haut à gauche et à droite border et border-radius pour votre p élément. Cela permettra également d'obtenir l'apparence que vous cherchez.

    CSS:

    h1, p {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  margin: 0;
  padding: 10px 0;
}

h1 {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

p {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

    HTML:

      <h1>Hello</h1>
  <p>World</p>

    • Merci Chris. Pourrais-je poser une question? Je suis en train de mettre une image sur le côté gauche et en-tête et le paragraphe sur le côté droit? Comment puis-je créer deux colonnes, afin que l'image est sur le côté gauche et les textes sont sur le côté droit?
    • Pas de problème! Une chose est sûre! Si vous devez d'abord marquer cette question comme résolu (si c'est bien) et ensuite de poster une nouvelle question, puisque celle-ci est sur les frontières. Une fois que votre question est affiché à partager le lien ici.
    • Je l'ai fait! Voici le lien Chris 🙂 stackoverflow.com/questions/37816500/...
    InformationsquelleAutor Chris
  2. 0

    Ou - si vous ne peut pas mettre un wrapper autour de, le faire comme ceci:

    h1 {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  padding: 10px;
}

p {
  font-family: Consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  padding: 10px;
}

    http://codepen.io/anon/pen/yJOwLY

    InformationsquelleAutor Johannes
  3. 0

    CSS:

    h1{
 font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
 border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}

    HTML:

    <div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>

    Prendre les deux balises de titre d'un wrapper et donner les attendus de la frontière. Svp un coup d'oeil sur les points suivants:
    CSS:

    <style type="text/css">
h1{
 font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}
</style>

    HTML:

    <div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>
    InformationsquelleAutor Md. Ranju Mia