ホームページ  >  記事  >  ウェブフロントエンド  >  Wrapping_html/css_WEB-ITnose要素による空白の問題

Wrapping_html/css_WEB-ITnose要素による空白の問題

WBOY
WBOYオリジナル
2016-06-24 12:05:521516ブラウズ

(1) 2 つの要素 (そのうちの 1 つはブロックレベル要素) は必ず折り返されます。行の折り返し後、上部と下部の要素の間に空白のギャップ行が存在します。
(2) 両方ともインライン要素ですが、インライン要素の幅 親要素の幅を超えると自動的に折り返されてしまいます

この原因と解決策が知りたいです。空白のギャップラインを知っている人はいますか?


ディスカッションへの返信 (解決策)

はブラウザのデフォルトのスタイルである必要があります。
Firebug は要素のスタイルを監視しますか?
通常、css の先頭でスタイルシートをリセットし、margin:0;padding 0; などを追加し、デフォルトの margin と Padding を削除します

実は、このような問題は完全に回避できます。できないことを承知でやっている
1) エフェクトは 1 行に表示されなくなったので、2 つのブロックレベル要素を使用するか、フローティング後に幅を設定できます
2) 子は親を超えており、親自体は互換性の問題、IE6 では親が開き、overflow:hidden を設定できます

さらに、diplay:inline-block; として表示される要素が同じ行に表示され、コードの改行が解析されます。これはいわゆるホワイトスペースです。解決策はありません。float を diplay:inline-block; のアップグレード版と考えることができます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。