リスト項目の要素

質問

CSSでリスト項目 li にmarginやpaddingを指定できるようですが、
リスト項目 li はブロックレベル要素とインライン要素の
どちらになるんでしょうか？

回答No.2

himajin100000

XHTML 1.0 DTD的な視点でいうなら

<!ENTITY % special.pre
"br | span | bdo | map">

<!ENTITY % special
"%special.pre; | object | img ">

<!ENTITY % fontstyle "tt | i | b | big | small ">

<!ENTITY % phrase "em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup ">

<!ENTITY % inline.forms "input | select | textarea | label | button">

<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">

<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">

<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

<!--================== Block level elements ==============================-->

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">

<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | fieldset | table">

<!ENTITY % Block "(%block; | form | %misc;)*">

<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

どこにもli要素やdt要素,dd要素の話が出てきませんから、liは単独で存在していることになります。

========
次、CSSの話。
俺は何要素に何を割り当てるべき、って記述が仕様に含まれるかを知らないけれど
Firefoxのブラウザのデフォルトスタイルシートである
C:\Program Files\Mozilla Firefox\res\html.css
を見ると

li {
display: list-item;
-moz-float-edge: margin-box;
}

p, dl, multicol {
display: block;
margin: 1em 0;
}

html, div, map, dt, isindex, form {
display: block;
}

dd {
display: block;
-moz-margin-start: 40px;
}

となっています

さて、

marginプロパティは
all elements except elements with table display types other than table-caption,
table and inline-table

table-captionとinline-table以外のtable関連のdisplayを、【持たない】全ての要素に適用できる、
と書かれていますから、この二つのどちらにも適用できます

paddingプロパティは

all elements except table-row-group, table-header-group, table-footer-group,
table-row, table-column-group and table-column

table-row-group, table-header-group, table-footer-group,
table-row, table-column-group and table-columnでない全ての要素

なのでやっぱり適用できます

お礼

回答ありがとうございます。

回答No.1

steel_gray

<li>はブロック要素です。
（display特性はlist-itemですが）
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#display-prop

お礼

回答ありがとうございます。