ヘッダーと段落の周りに境界線を置く

Question

ヘッダーと段落の周りに1つの境界線を配置しようとしています。現在、私はヘッダーと段落の周りに2つの別々の境界を持っています。どうすればそれらの周りに単一の境界線を置くことができますか？

<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> 

Answer 1

上記で提案したように、単にラッパーの内側に追加し、代わりにラッパーにスタイルを設定します。これと同じように：あなたがしたり、マークアップを変更しないことができない場合は代わり

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

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

---

、単にあなたのh1要素の左下削除し、右borderとborder-radiusができまた、p要素の左上と右端のborderとborder-radiusを削除します。これはまたあなたが探している外観をもたらすでしょう。

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; 
 
}

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

Answer 2

か - あなたはははそれarroundのラッパーを置くことができない場合は、このようにそれを実行します。

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

Answer 3

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

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

両方のタグをラッパーの下に置き、予想される境界線を付けます。 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>