みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;
}


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

投稿日時 - 2014-01-23 16:57:07

QNo.8443130

困ってます

質問者が選んだベストアンサー

先ほどは横幅と誤解して筋違いの回答をしたようで・・
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 )

投稿日時 - 2014-01-23 17:41:35

お礼

ありがとうございます。

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

投稿日時 - 2014-01-23 20:38:17

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

>横は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:を指定しています。テキストが中央に表示されますし、継承されるので・・

投稿日時 - 2014-01-24 09:55:10

お礼

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

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

投稿日時 - 2014-01-24 13:27:29

ANo.1

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

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

投稿日時 - 2014-01-23 17:05:09

あなたにオススメの質問