ホームページ >ウェブフロントエンド >htmlチュートリアル >設定された margin-top 属性が機能しないのはなぜですか_html/css_WEB-ITnose
設定された margin-top 属性が機能しないのはなぜですか_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:221602ブラウズ
set margin-top 属性が機能しない理由:
提案: できる限りコードを手書きすると、学習の効率と深さを効果的に向上させることができます。
構文エラーがないにもかかわらず、margin-top 属性の設定が機能しないという奇妙な現象が発生する場合があります。この現象の原因と解決策を紹介するコード例を以下に示します。
理由 1:
外側マージンを結合する margin-top 属性が無効です。コード例は次のとおりです。
rrree
上記のコードの動作から、2 番目の div によって設定された margin-top は有効ではないことがわかります。機能するのは、最初の div によって設定された margin-bottom です。ここには、結合されたマージンの高さがマージンの大きい方の高さに等しいというルールがあるため、この状況が発生した場合は、マージンのサイズの設定に特に注意する必要があります。
理由 2:
子要素と親要素によっても、子要素のマージンの設定が失敗する可能性があります。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.first{ width:100px; height:100px; background-color:red; margin-bottom:60px;}.second{ width:100px; height:100px; background-color:green; margin-top:40px;}</style></head><body><div class="first"></div><div class="second"></div></body></html> 解決策:
親オブジェクトには、対応するマージン方向に境界線があります ( border) やパディング、または overflow 属性値を hidden に設定することは回避できます。
IE6 ブラウザではマージンの結合は発生しません。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4638