<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>破線枠で囲む</title>
<style>
<!--
* {
margin: 0;
padding: 0;
}
-->
body {
font-size: 1.0em;
}
.box1, .box2 {
border: 1px solid #999;
margin-bottom: 18px;
padding: 12px;
}
.box2 p {
background-color: #acf;
}
p {
border-bottom: 1px dashed #000;
}
.border1 {
padding: 12px;
}
.border2 {
padding: 12px 0;
}
.border3 {
padding: 2px 0 2px 0;
}
.border4 {
padding: 2px 0;
}
</style>
</head>
<body>
<div class="box1">
<p class="border2">テキストに破線を表示したい［padding:12px 0］</p>
</div><!--▲box1-->
<div class="box1">
<p class="border3">テキストに破線を表示したい［padding:12px 0 2px 0］</p>
</div><!--▲box1-->
<div class="box1">
<p class="border4">テキストに破線を表示したい［padding:2px 0］</p>
</div><!--▲box1-->
<hr />
<div class="box2">
<p class="border1">テキストに破線を表示したい［padding:12px］</p>
</div><!--▲box2-->
<div class="box2">
<p class="border2">テキストに破線を表示したい［padding:12px 0］</p>
</div><!--▲box2-->
<div class="box2">
<p class="border3">テキストに破線を表示したい［padding:12px 0 2px 0］</p>
</div><!--▲box2-->
<div class="box2">
<p class="border4">テキストに破線を表示したい［padding:2px 0］</p>
</div><!--▲box2-->
</body>
</html>
