简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

子要素に margin-top を追加すると、親要素_html/css_WEB-ITnose の問題が増加します

WBOY
リリース： 2016-06-24 11:29:33
オリジナル
1481 人が閲覧しました

次のコードがあるとします


子要素を親要素から分離しませんが、その効果は親要素に margin-top を追加するのと同等です。

具体的には次のような解決策もあります:

1. 親要素の高さを変更し、padding-top スタイルのシミュレーションを追加します (padding-top:1px;)

2. 親要素に overflow:hidden;

を追加します。 3. 親要素または子要素の life 要素をフロートします (float:left; 使用できますが推奨されません)

4. 親要素のボーダー(border:1px ソリッド透明)を追加します

5. 親要素の絶対位置を宣言します。要素または子要素

6. 親要素にコンテンツ生成を追加します #father:before{content:' ';display:table};

関連ラベル：
子元素增加margin-top会增加给父元素的问题
ソース：php.cn
前の記事： 次の記事：CSS3 例: スワップの実装 anime_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width: 100% からトランジションするとトランジションがジャンプするのはなぜですか? この問題を再現するために JSFiddle を作成しました。ホバー時にグリッド要素を拡大させようとしていますが、別のグリッド要素の下に入り、予想どおりにジャンプするという奇妙な問題...
から 2023-09-13 14:24:30
0
2
238
ReactJS - カスタムフックリターン関数は内部状態の実際のデータを保存しない 通知ウィジェット用のカスタムフック useNotifications があります。このフックは、次の要素を含む配列を返します (ant.design メッセージング API に似て...
から 2023-09-12 08:49:22
0
1
179
useEffect の再実行: 関数を送信した後のガイドライン こんにちは、みんな！私のプロジェクトでは、useeffect でデータを取得する関数を実行していますが、firestore に新しい要素を追加するときに、リストに新しい要素が含まれ...
から 2023-09-10 11:06:03
0
2
308
flex:auto 要素のサブリストの幅を設定する方法 こんにちは、CSS に問題があります。 2 つの列があり、右 (B) 列の幅は 100 ピクセルに固定されており、左 (A) 列は残りの幅を満たす必要があります。さらに、列 A 内...
から 2023-09-09 18:09:18
0
2
242
背景が丸いテキストを画像にオーバーレイする方法 この画像に表示されているものを HTML で複製する必要があります。問題は、テキストが div と背景画像を覆っていることです。外側の div に画像がなく単色もない場合は、角が丸...
から 2023-08-30 15:20:14
0
1
192
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！