今日は退屈だったので、以前の 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 の高さが変わっていることがわかりました。実際に高くなる。どうしてこれなの?ゆっくり勉強してください。