色の付いたboxに文字を上下等間隔に並べたいのですが、何かスマートな方法はないでしょうか？

質問

* {
margin: 0px;
padding: 0px;
}

.box {
width: 100px;
background-color: #eeeeee;
padding: 10px 10px 0px 10px;
}

.text {
margin-bottom: 10px;
}

<div class="box">
<p class="text">あああ</p>
<p class="text">いいい</p>
</div>

色の付いたboxに文字を上下等間隔に並べたいのですが、何かスマートな方法はないでしょうか？

IEでの表示が理想なのですが、Firefoxでは下のpaddingが無くなります。
boxのwidthがあるかないかが引き金のIEのバグということは分かりました。

boxに「padding-bottom: 1px;」で直りましたが、何故こうなるか意味がわかりません。

皆様はこういう時どのようにしていますか？

回答No.2

SheetFit00 · ベストアンサー

わたしだったら、WordとかExcelできれいに作成して、それをHTML形式で保存したものを参考にします。
手打ちに比べて複雑なHTMLが出力されますが、表なんかを作るときは楽なのでそのまま使ってしまいますね。

回答No.3

leap_day

こんにちは

<style type="text/css"><!--
* {
margin: 0px;
padding: 0px;
}

.box {
background-color: #eeeeee;
padding:0.5em 1em 0.5em 1em;
line-height:2em;
}

--></style>

<div class="box">
あああ<br>
いいい
</div>

とか？

回答No.1

kuzumiHK

padding: 10px 10px 0px 10px;を、
（上10px 右10px 下0px 左10px）
padding: 10px;にして、
（上下左右統一で10px）
margin-bottom: 10px;を削除では、
まだ表示がおかしいでしょうか。