CSSで角丸を表現する際に空いてしまう隙間を改善する方法

2010年10月29日

CSSで背景をいくつか利用して角丸を表現しようとする際に、div要素をいくつか重ねると、IE6などでdiv間に隙間が空いてしまう場合があります。その改善方法です。
ただし、今回紹介するコーディング方法は中身のないタグ要素、すなわち空要素を使っているHTMLが対象であり、空要素を使うことはコーディングのルールとして間違っています。あくまでそういったコーディングがなされた既存のサイトを改善する、という前提でご紹介しますことをお断りさせていただきます。

HTML

1<div class="wrapper">
2    <div class="boxTop "></div>
3    <div class="boxInner">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
4    <div class="boxUnder"></div>
5</div>

CSS

01    .wrapper {
02        width: 220px;
03        padding: 0px;
04    }
05    .boxTop {
06        width: 220px;
07        height: 8px;
08        background: url(box_top.gif) no-repeat;
09    }
10    .boxInner {
11        padding: 10px;
12    }
13    .boxUnder {
14        width: 220px;
15        height: 9px;
16        background: url(box_under.gif) no-repeat;
17    }
18</div>

上記のようなコードを修正するとした場合、方法として二つ考えられます。

方法1 空要素にfont-size: 0pxを指定する

01.boxTop {
02    width: 220px;
03    height: 8px;
04    background: url(box_top.gif) no-repeat;
05    font-size: 0px;
06}
07.boxUnder {
08    width: 220px;
09    height: 9px;
10    background: url(box_under.gif) no-repeat;
11    font-size: 0px;
12}

上記のように、空要素にfont-size: 0px;を指定することで、隙間が空いてしまうバグを回避することが可能です。

方法2 div要素を入れ子にする

HTML

1<div class="wrapper">
2    <div class="outer">
3        <div class="inner">
4            <div class="textBox">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
5        </div>
6    </div>
7</div>

CSS

01.outer {
02    padding-top: 8px;
03    background: url(box_top.gif) no-repeat top;
04}
05.inner {
06    padding-bottom: 9px;
07    background: url(box_under.gif) no-repeat bottom;
08}
09.textBox {
10    background-color: #F7B15E;
11    padding: 10px;
12}

サンプルページ

上記のように、div要素を入れ子にすることで問題を回避することができます。こちらの方がコーディングとしてもシンプルですし、角丸を作る際などはおすすめします。
※便宜上、クラス名は変更しています。

今回はややイレギュラーな状況に限ったお話となりましたが、もしこういった状況に陥ってしまった場合は、今回紹介した方法をお試しください。