HTML&CSS

枠線(border)の中の要素の余白を解消

タイトルがあるボックスを作る時、枠線の中に出来る余白を解消したい

こんなボックスを作りたい時、borderで囲うと、中の要素との間に余白が出てきてしまう。これを解消したい!!

<div class="box">
  <h1>タイトル</h1>
 <p>テキストテキストテキストテキスト
   テキストテキストテキストテキスト
   テキストテキストテキストテキスト
   テキストテキストテキストテキスト
 </p>
</div>
.box{
   outline:3px solid #0071BF;
	 outline-offset:-3px;
}
.h1{
   background-color: #0071BF;
   color:#fff;
}

-HTML&CSS