新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

リストタグ(<UL>、<OL>)の左マージンはpadding-left。<DL>だけmargin-left【Webデザイン・CSS】

      2014/11/08

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

Webデザインをする上でかねてから気になっていたことをしっかりとしらべてみました。
それは、リストタグの左マージンのこと。
実際は、リセットCSSで「margin:0;padding:0」 をしてしまうので、気にすることはないのですが、
でも、知っておいても損はないですもんね。

UL・DLのマージン
左がソース、右がブラウザ表示。
今回調べたのは赤で書かれている初期マージンの部分。

スポンサーリンク
 

これを調べるきっかけになったのはIE(旧バージョン)とその他のブラウザでリストの表示に違いがあったから。
だったらどっちが正解なの?というのもあり、最新ブラウザを使って調べてみたところ、現在は以下のように統一されているようです。

<UL><OL>の左の空き(マージン)は親要素<UL><OL>の内マージン(padding)
これをなくすには

UL,OL {
padding-left:0px;
}

一方、<DL>内の<DD>左の空き(マージン)は子要素<DD>の外マージン(margin)
これをなくすには

DD{
margin-left:0px;
}

となります。

つまり、形状上、仕方がないといえば仕方がないのですが、<DL>だけは子要素の外マージンで、他のリストは親要素の内マージンだったんです。
できればどちらも子要素の外マージンでやってほしかったですねぇ。。

ひょっとしたら当初、IEだけは<UL><OL>においても子要素<LI>の外マージンを取り入れていたために、
同じCSSでも表示に違いが出てしまっていたのかもしれませんね。

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

今更ながらFacebook(フェイスブック)のファンページを作ってみた【Facebookページの作り方01】

1年以上前の記事です。内容が古い可能性があります。意外と「いいね!」の多い記事な …

HTML5対応HTML構文チェック(バリデート)サイト「Another HTML Lint5」

1年以上前の記事です。内容が古い可能性があります。Dreamweaverなど、H …

2011年「初日の出」画像まとめ

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …

WordPressでプレビューが見れなくなったらプラグイン「WP File Cache」「WP Super Cache」を無効化→有効化

1年以上前の記事です。内容が古い可能性があります。当ブログ、WordPressで …

やっちゃった!「IE9」、「IE10」でHelvetica(ヘルベチカ)が表示されないバグ

1年以上前の記事です。内容が古い可能性があります。相変わらずIE(インターネット …

no image
出会い系サイトの手口(予想)

1年以上前の記事です。内容が古い可能性があります。別のサイトでも出会い系サイトの …

no image
来年までごきげんよう

1年以上前の記事です。内容が古い可能性があります。今年最後のブログになるのかな。 …

no image
Safariの癖

1年以上前の記事です。内容が古い可能性があります。忘れないうちに「Safari」 …

背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】

1年以上前の記事です。内容が古い可能性があります。今、作っている某総合福祉センタ …

no image
うちわ祭とインターネット

1年以上前の記事です。内容が古い可能性があります。その他の「うちわ祭」関連記事& …

血液型オヤジ