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

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

  関連記事

GoogleのWeb検索履歴を止める方法

1年以上前の記事です。内容が古い可能性があります。こちらのクリッピングを受けてG …

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

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

「LINE Creators Market(ラインクリエイターズマーケット)」の人気スタンプ。「かわベーコン」さんの「にゃっちーず」他

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

猫に与えちゃ(食べさせては)いけないもの【ペロ追悼企画】

1年以上前の記事です。内容が古い可能性があります。先日、一番最初に飼い始めたうち …

no image
アンカーリンク(ページトップへ)5つの方法

1年以上前の記事です。内容が古い可能性があります。縦に長いサイトで、メニューが上 …

Appleの「Retina(レチナ)ディスプレイ」とはなんなのか?

1年以上前の記事です。内容が古い可能性があります。Appleの新商品発表会「WW …

急須の口についた「ビニールキャップ」は運搬時の保護のため、外して使うのが正しい使い方

1年以上前の記事です。内容が古い可能性があります。そういえば、うちもかなり以前、 …

Illustrator(イラストレータ)のピクセルにスナップ(ピクセルグリッドに整合)を解除する方法 【DTP】

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

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

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

給料が遅れたらさっさと会社を辞めた方がいい3つの理由

1年以上前の記事です。内容が古い可能性があります。会社がやばい兆候というのはいく …

血液型オヤジ