新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

「iOS5」にしたらロックしててもすぐ写真が取れるようになった【iPhone】

1年以上前の記事です。内容が古い可能性があります。これもiOS5に変えたおかげで …

カーナビの地図更新サービスの無料期間が終わりそうなので地図データをアップデートしてみた(データ更新編)

1年以上前の記事です。内容が古い可能性があります。1. ID取得編 | …

酔った女性とH(性的行為)したら準強姦罪になる可能性

1年以上前の記事です。内容が古い可能性があります。あくまでも、酔っ払いすぎて前後 …

no image
Googleのプラスワン(+1)ボタンをつけてみた(7/1追記)

1年以上前の記事です。内容が古い可能性があります。日本ではまだサービスを開始して …

独自ドメインのWORDPRESS(ワードプレス)ブログを半日で作る方法(前編)

1年以上前の記事です。内容が古い可能性があります。ブログ移転後最初の記事はまさに …

電源ボタンが壊れたiPhoneを電源ボタンを使わず再起動させる方法

1年以上前の記事です。内容が古い可能性があります。娘の「iPhone5」の電源ボ …

ルーターをブリッジとして使うときの注意点(6/17修正)

1年以上前の記事です。内容が古い可能性があります。会社に無線対応のルーターが導入 …

CPUの差し替え(Pentium IIIからPentium 4へ)

1年以上前の記事です。内容が古い可能性があります。前々から調子の悪いPentiu …

iPhoneの連絡先をAndroidの連絡先に転送する方法(GmailにCSVをインポート)

1年以上前の記事です。内容が古い可能性があります。ケータイ(スマートフォン)の機 …

これからのSEOは被リンクでなく「テールワード」と「サテライトサイト」

1年以上前の記事です。内容が古い可能性があります。久しぶりにSEOのことを書こう …

血液型オヤジ