新・元地方の中規模印刷会社で苦悩する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年以上前の記事です。内容が古い可能性があります。Googleは最も合理的なデザ …

「引用」と「転載」と「無断転載」の違い

1年以上前の記事です。内容が古い可能性があります。以前、引用と転載の違いをまとめ …

スマホ(スマートフォン)を機種変した時のLINE(ライン)の移行手順と注意点【Android→iPhone編】

1年以上前の記事です。内容が古い可能性があります。スマホをiPhoneに変えた旨 …

TwitterとFlickrを連動させよう

1年以上前の記事です。内容が古い可能性があります。Twitterとは言わずとしれ …

エゴサーチとは何のこと

1年以上前の記事です。内容が古い可能性があります。エゴサーチという言葉をたまに耳 …

no image
ツイッター、メンション(mention)とリプライ(reply)は違う?

1年以上前の記事です。内容が古い可能性があります。こちらの記事の解答編。 □&n …

no image
YouTubeとFacebookを連携させる方法

1年以上前の記事です。内容が古い可能性があります。ここのところ連携を止める方法を …

デザイナーはハマるはず。ロゴの色を当てていく「Brandseen」

1年以上前の記事です。内容が古い可能性があります。なかなか面白いコンセプトですが …

ツイッター(Twitter)でバカ発見器(バカッター)に見つからないための8カ条

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

どんな些細なことでも110番。酔っ払いと仲間たちだと思っていたら被害者死亡の傷害致死事件だった

1年以上前の記事です。内容が古い可能性があります。一度、自転車で転倒して、そのま …

血液型オヤジ