BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS margin terror; Marginは親要素の外側にスペースを追加する [duplicate] 。

2022-04-15 15:22:04

質問

私のCSSマージンは、私が望む、あるいは期待するような動作をしません。ヘッダーのmargin-topがそれを囲むdiv-tagに影響するようです。

これは私が望んでいることであり、期待していることです。

...が、結局はこうなってしまう。

出典 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

この例では、マージンを誇張しています。ブラウザのデフォルトではh1タグのマージンはやや小さめで、私の場合は Twitter Bootstrap、Normalizer.css付き。 で、デフォルトのマージンは10pxに設定されています。重要なのは、「できない」「してはいけない」ということです。 したくない h1タグのマージンを変更する。

他の質問と同じような感じでしょうか。 このCSSのmargin-topスタイルが機能しないのはなぜですか？ . 質問は、この具体的な問題を解決するにはどうしたらいいかということです。

私は、以下の記事を読みました。 いくつかのスレッド のような問題で、本当の答えと解決策は見つかっていません。私は padding:1px; または border:1px; は問題を解決します。しかし、それは新たな問題を追加するだけです。なぜなら、私はdivタグにpaddingやborderをつけたくないからです。

もっと良い、ベストプラクティスの解決策があるのでは？これはかなり一般的なことなのでしょう。

どのように解決するのか？

追加 overflow:auto を、あなたの #page divを使用します。

jsFiddleの例

そして、チェックアウト 折り畳み余白 をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します