ホームページ > ウェブフロントエンド > htmlチュートリアル > CCS では、margin-bottom は本当に無効ですか? _html/css_WEB-ITnose

CCS では、margin-bottom は本当に無効ですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:54:45
オリジナル
1464 人が閲覧しました



たとえば、上の画像の文字を下に表示したいのですが、タイトルが 2 行になる場合があるため、margin-top を設定しても、確かに問題を一度に解決することはできません。

次の部分と似ています:

<div>   <p>巴萨憾负塞尔塔,梅西哭晕在厕所。</p></div>
ログイン後にコピー


外側の div の margin-bottom: 0 を無効にしました。
Web ページが上から下にレイアウトされているのは、margin-bottom が無効な理由ですか?
マージンボトムを有効にする解決策はありますか? (position:absolute メソッドを除く)。 margin-bottom が本当に無効である場合、この属性の存在には理論的な意味しかないのではないでしょうか?


ディスカッションへの返信(解決策)

この属性の意味を誤解しています。これは、設定した要素の下マージンを指しますが、親要素の下部にあるという意味ではありません。また、すべての子要素が親要素の最後に表示されるという意味でもありません。あなたが言ったような場合、絶対位置を使用してbottom:0を設定した場合にのみ機能します。

margin-bottom は機能します。私は何度も使用しています。

この属性の意味を誤解しています。これは、設定した要素の下部マージンを指しますが、それが要素の下部にあるという意味ではありません。親要素のすべての子要素がその下部に表示されるわけではありません。あなたが言ったような場合、絶対位置を使用してbottom:0を設定した場合にのみ機能します。


質問があります:
ターゲット要素の下に他の兄弟要素がない場合、margin-bottom:0 が親要素の一番下にあることを意味しないのはなぜですか?
margin-bottom:0 とはどういう意味ですか?

たとえば、2 つのボックスを上から下に配置する場合、最初のボックスに margin-bottom:10px を設定すると、2 番目のボックスは最初のボックスから 10 ピクセル離れた位置に配置されます。 set margin-bottom:10px 0の場合、最初のマージンの隣になります(もちろん、2番目のマージントップも0に設定されます)。同じレベルです。親要素内での位置は設定しません。

それは機能しますよね?

たとえば、2 つのボックスを上から下に配置する場合、最初のボックスに margin-bottom:10px を設定すると、2 番目のボックスは離されます。最初のボックスは 10px に設定すると、最初のボックスの隣になります (もちろん、2 番目のボックスの margin-top も 0 に設定されます)。これは要素間の間隔を設定するためです。親要素内での位置を設定するのではなく、同じレベルの。


はい、私が概念を混乱させたので、それを理解しました:)

それはうまくいきますね


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