paddingがきかない。

質問

下記サイトのパンくずリストにpaddingを加えたのですが上部にの背景が広がりません。

ulはpaddingがきかないと言うことは無いのになぜきかないのでしょうか？
http://sample1.digi2.jp/yufu/inquery.html

仕方ないのでheightを使いました。
ul#topicpath{
background-image: url(img/base/blackground.png);
width: 200px;
height: 40px;
white-space: nowrap;
display: table-cell;
vertical-align: middle;
text-align: center;
}

ul#topicpath li {
display: inline;
color: #FFF;
font-weight: bolder;
}

原理主義者は答えなくていいです。

回答No.2

ORUKA1951 · ベストアンサー

先ほどは横幅と誤解して筋違いの回答をしたようで・・
ulは、ブロック要素ですがそれ自体のサイズは抱合している要素に依存します。
したがって、高さはline-height:で指定しないとなりません。line-height:は継承されますので
ul{line-height:40px;}
とするのが正しい方法です。
また、ul{
border:solid transparent 1px;
padding:20px 0;
}
とborderを指定すると背景色/画像はborder辺の内側になります。

　ul自体に高さが存在しないのは、含まれるli(リストアイテム)要素をabsoluteなどで独立させると、高さが消えてしまうことでわかるでしょう。

　詳しくは
　⇒8.4 パディングのプロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#padding-properties )

お礼

ありがとうございます。

ulは、ブロック要素なのにそれ自体のサイズではなく、中の要素の縦のサイズで縦のサイズを決めるのですね。
横はwidthで出来ますが。

回答No.3

ORUKA1951

>横はwidthで出来ますが。
　そうです。ブロック要素なので、height:width:共にautoなのですが、ちょっと扱いが変わっていて、ブロック要素の場合は横幅一杯、縦は折り返しなどもあるため内容に追随・・・幅は無くても一杯、縦はなかったらゼロ。
　置換インライン要素とか、非置換とか、私もこの部分はややこしくて実際にやってみないとと(苦笑)。
　⇒10 視覚整形モデル詳細( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html )
　⇒10.6 高さとマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_heights_and_margins )

　私は原則としてline-height:を指定しています。テキストが中央に表示されますし、継承されるので・・

お礼

ありがとうございました。

また、今後ともコメントはお手柔らかにお願いします。

回答No.1

barusu0126

>ulはpaddingがきかないと言うことは無いのになぜきかないのでしょうか？
ブラウザ等の環境にもよるので、決めつけるのは原理主義者のやることです。

で、ulではなく、liに反映させる方法は試したんですか？