はじめに

最近久しぶりにweb制作をやる機会があって、少しコーディングで詰まったところがありました。。。

それはborderをブロック要素の上下に表示させて、各要素の区切りを表示するようなよくあるデザインです。
しかし普通にやると一番上と下以外が重なってしまって太くなってしまうんですよね。。。

 <div class="recruting-items">
          <div class="recruting-item">
            <div class="recruting-title">
              新卒採用
            </div>
            <div class="recruting-position">
              オープンポジション
            </div>
          </div>
          <div class="recruting-item">
            <div class="recruting-title">
              中途採用 / サービス企画
            </div>
            <div class="recruting-position">
              広告事業戦略
            </div>
          </div>
 </div>

.recruting-item {
	border-top: 1px solid #EAEAEA;
	border-bottom:  1px solid #EAEAEA;
	padding: 24px 0;
	line-height: 22px;
	font-size: 14px;
}

これをどうやったら解決できるか？

解決法

.recruting-item {
	border-top: 1px solid #EAEAEA;
	border-bottom:  1px solid #EAEAEA;
	padding: 24px 0;
	line-height: 22px;
	font-size: 14px;
	margin-bottom: -1px;
}

borderをつけるブロック要素に対してmargin-bottom: -1px;のように、線の幅分マイナス指定すると消してくれます！
手っ取り早く解決するならこれでOKかと！