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

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

  関連記事

no image
ページランクまとめ

1年以上前の記事です。内容が古い可能性があります。過去ログみてもページランクの仕 …

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

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

「HTML5」「CSS3」「ActionScript3.0」

1年以上前の記事です。内容が古い可能性があります。近頃はディレクション業にかまけ …

ドコモケータイの契約変更は「151」にダイヤル

1年以上前の記事です。内容が古い可能性があります。iモード(インターネット)で契 …

念のため放射能がどの程度飛散しているか調べられるサイト(4/21追記)

1年以上前の記事です。内容が古い可能性があります。あくまでも念のためです。僕も水 …

「RSS Graffiti」がバージョンアップし使いやすくなった【Facebook】

1年以上前の記事です。内容が古い可能性があります。いつの間にやらFacebook …

グルメ系、レビュー系の記事に集客力は殆ど無い

1年以上前の記事です。内容が古い可能性があります。ノンジャンルで記事を書き続けて …

no image
デザイン変えてみた

1年以上前の記事です。内容が古い可能性があります。すぐまた変えるかも。 結構色々 …

iPhoneで自分の携帯番号を確認する方法

1年以上前の記事です。内容が古い可能性があります。勢いで確認するシリーズを3つま …

ワードプレス(WordPress)のアップグレードをちゃんとやってみた【さくらインターネットの場合】 #wp

1年以上前の記事です。内容が古い可能性があります。ワードプレス(Wordpres …

血液型オヤジ