ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS学習-DIVの空白スペースlayout_html/css_WEB-ITnose

CSS学習-DIVの空白スペースlayout_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:28:41
オリジナル
1384 人が閲覧しました

今日は退屈だったので、以前の CSS デモを掘り出して、以下に示すようにいくつかのコードを書きました:

<style type="text/css">div{ padding:0; margin:0; width:100%; position:relative;}.col1{ background-color:#0C0;}.col2{background-color:#CF0;}.col3{background-color:#06C;}</style></head><body><div class="col1"><h1>1</h1></div><div class="col2"><h1>2</h1></div><div class="col3"><h1>3</h1></div></body></html>
ログイン後にコピー

コードのデモの効果は次のとおりです:

上記から、次のことがわかります。各 DIV の間にはギャップがあり、デフォルトでは、すべての主要なブラウザで DIV は一定量の空白スペースを残します。

へー

上記のコードをソースコードに追加すると、次のような効果が得られます:

各 DIV 間の空白は消えましたが、高さが設定されていない DIV の高さが変わっていることがわかりました。実際に高くなる。どうしてこれなの?ゆっくり勉強してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート