ホームページ > 記事 > ウェブフロントエンド > CSS学習-DIVの空白スペースlayout_html/css_WEB-ITnose
CSS学習-DIVの空白スペースlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:28:411345ブラウズ
今日は退屈だったので、以前の 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 の高さが変わっていることがわかりました。実際に高くなる。どうしてこれなの？ゆっくり勉強してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。