リストタグ(<UL>、<OL>)の左マージンはpadding-left。<DL>だけmargin-left【Webデザイン・CSS】
2014/11/08
1年以上前の記事です。内容が古い可能性があります。
Webデザインをする上でかねてから気になっていたことをしっかりとしらべてみました。
それは、リストタグの左マージンのこと。
実際は、リセットCSSで「margin:0;padding:0」 をしてしまうので、気にすることはないのですが、
でも、知っておいても損はないですもんね。
左がソース、右がブラウザ表示。
今回調べたのは赤で書かれている初期マージンの部分。
これを調べるきっかけになったのはIE(旧バージョン)とその他のブラウザでリストの表示に違いがあったから。
だったらどっちが正解なの?というのもあり、最新ブラウザを使って調べてみたところ、現在は以下のように統一されているようです。
<UL><OL>の左の空き(マージン)は親要素<UL><OL>の内マージン(padding)
これをなくすには
padding-left:0px;
}
一方、<DL>内の<DD>左の空き(マージン)は子要素<DD>の外マージン(margin)
これをなくすには
margin-left:0px;
}
となります。
つまり、形状上、仕方がないといえば仕方がないのですが、<DL>だけは子要素の外マージンで、他のリストは親要素の内マージンだったんです。
できればどちらも子要素の外マージンでやってほしかったですねぇ。。
ひょっとしたら当初、IEだけは<UL><OL>においても子要素<LI>の外マージンを取り入れていたために、
同じCSSでも表示に違いが出てしまっていたのかもしれませんね。
アドセンス広告メイン
関連記事
-
ライトボックス(Lightbox)のJavaScript読み込みはヘッダー<head>じゃなくてボディー<body>【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。最近、LP(ランディングページ …
-
休み中の集客は?
1年以上前の記事です。内容が古い可能性があります。休み中の集客はやっぱり楽しいサ …
-
何を売るかが問題
1年以上前の記事です。内容が古い可能性があります。いまどき、Webの知識だけでフ …
-
ブラウザは速度で争う時代になってきた
1年以上前の記事です。内容が古い可能性があります。もう、使ってないからどうでもい …
-
HTML5対応HTML構文チェック(バリデート)サイト「Another HTML Lint5」
1年以上前の記事です。内容が古い可能性があります。Dreamweaverなど、H …
-
もっともっと
1年以上前の記事です。内容が古い可能性があります。世の中はずいぶん進んでいるみた …
-
カレンダー表示にマップ表示もできるFlickr(フリッカー)が凄い
1年以上前の記事です。内容が古い可能性があります。ここ数日、Flickrをよくい …
-
縦に撮っちゃった動画を横に修正する方法
1年以上前の記事です。内容が古い可能性があります。iPhoneの便利さが逆に仇に …
-
DMOZ(OPD)のエディタになってみる?
1年以上前の記事です。内容が古い可能性があります。DMOZの印刷カテゴリに会社の …
-
実はユーザーはオープンよりもクローズドを求めている
1年以上前の記事です。内容が古い可能性があります。何かとオープン化オープン化とい …