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

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

*

CSSは行送り(vertical-align)に注意!!

   

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

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

久しぶりにCSSコーディングなんかをやっているといろいろなことに気付く。
今回はCSSに関してのワンポイントアドバイス。

スポンサーリンク
 

以前も、SafariでCSSを使った角丸罫囲みに隙間が空いてしまうことがあったのですが、
それと似たようなことが今度はIE6で起きました。

何故だか理由はわからないのですが<p>タグで囲まれたテキストに対しての「margin-top」にマイナスの値を入力すると、どこからか罫線が現れてくるという現象です。
<div>タグが入れ子になっているためにどこからか背景が現れているような気はするのですが、
いくら「margin」の指定を変えても消えない。マイナスにしないと大丈夫。
しかも、IE7では問題ないのでIE6特有のバグでしょう。
そういえば以前、リスト<li>タグに関するバグではまったこともあったけど、
あれもIE6だったはず。

で、いろいろやってみてふと、上記のSafariの記事のことを思い出し、
行送り(vertical-align)をいじってみると。。

直った。

今回は大き目の数値を入れたら直りました。

■教訓
CSSでデザインをする際、微妙に隙間が空いたり、なぜだか罫線が入ってしまったりしたときは「行送り(vertical-align)」を怪しんでみましょう。

□おススメ本

詳解HTML&XHTML&CSS辞典 第3版
僕はこれでCSSを覚えました。(ちなみに初版)

 - デザイン, 覚え書き

アドセンス広告メイン

Message

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

  関連記事

漢字の読みを調べる方法 パソコン編

1年以上前の記事です。内容が古い可能性があります。恥ずかしながら「訃報」の読みが …

残念っ!! コメント付き「いいね!」は「シェア」じゃない。設定次第ではバズらない【Facebook】

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

no image
各種SNSサービス連携まとめ

1年以上前の記事です。内容が古い可能性があります。色々と連携関連の記事を書いてき …

XPERIA(エクスペリア)をウォークマンにする設定

1年以上前の記事です。内容が古い可能性があります。AppleのスマホといえばiP …

Yahoo!ブログで表組みを書く方法 【wiki文法】

1年以上前の記事です。内容が古い可能性があります。生徒さんからの要望でYahoo …

no image
マーケティングに使えそうなツール

1年以上前の記事です。内容が古い可能性があります。Webマーケティングに使えそう …

いまどきの履歴書サイズは「B4二つ折り」ではなく「A4」

1年以上前の記事です。内容が古い可能性があります。訳あって、履歴書などを書いてい …

LINE(ライン)でブロックされるとこうなる

1年以上前の記事です。内容が古い可能性があります。もうちょっと詳しい記事を書きま …

最近よく聞く「マーケティングオートメーション」とは何のこと?

1年以上前の記事です。内容が古い可能性があります。このところ、よく耳にする「マー …

Facebookで「シェア」ができるブックマークレット

1年以上前の記事です。内容が古い可能性があります。「いいね!」と「シェア」の違い …

血液型オヤジ