理解できない質問があります。 1.html では、p は h1 をラップしており、h1 にはマージントップがあります。h1 のマージントップが実装されるのではなく、p の外側にバーストするのはなぜですか? p 内のマージン?2. p での実装方法。ありがとうございます。
コードデモリンクの説明
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
この質問は何度も寄せられていますので、参考にさせてくださいMDN-collapsing marginsCollapsing margins
jasonintjuの答えに従って、それを整理します: 子要素のmargin-topが親要素よりも大きいため、子要素のmargin-topを直接使用します
ブロック レベルの親要素とその最初/最後の子要素 ブロック レベルの親要素に、上ボーダー、上パディング、インライン コンテンツ、クリア フロートの 4 つの属性がない場合 (上ボーダーと上パディングについては、また、上マージンと上パディング幅が 0 の場合、このブロックレベル要素の上マージンとその最初の子要素は「互いに近い」と言えます。このとき、ブロックレベルの親要素とその最初の子要素の上マージンが結合されます。つまり、このとき親要素が表示するマージンがそのまま親要素とその最初の子要素になります。子要素の margin-top の値。 同様に、ブロックレベルの親要素の margin-bottom とその最後の子要素の margin-bottom が親のボーダー、パディング、インラインコンテンツ、高さ、最小高さ、最大高さによって分離されていない場合要素を選択すると、マージンのマージが発生します。
引用: https://developer.mozilla.org...
pとh1を分離し、pにパディングまたはボーダーを設定するだけです
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この質問は何度も寄せられていますので、参考にさせてください
MDN-collapsing margins
Collapsing margins
jasonintjuの答えに従って、それを整理します:
子要素のmargin-topが親要素よりも大きいため、子要素のmargin-topを直接使用します
ブロック レベルの親要素とその最初/最後の子要素
ブロック レベルの親要素に、上ボーダー、上パディング、インライン コンテンツ、クリア フロートの 4 つの属性がない場合 (上ボーダーと上パディングについては、また、上マージンと上パディング幅が 0 の場合、このブロックレベル要素の上マージンとその最初の子要素は「互いに近い」と言えます。このとき、ブロックレベルの親要素とその最初の子要素の上マージンが結合されます。つまり、このとき親要素が表示するマージンがそのまま親要素とその最初の子要素になります。子要素の margin-top の値。
同様に、ブロックレベルの親要素の margin-bottom とその最後の子要素の margin-bottom が親のボーダー、パディング、インラインコンテンツ、高さ、最小高さ、最大高さによって分離されていない場合要素を選択すると、マージンのマージが発生します。
引用: https://developer.mozilla.org...
pとh1を分離し、pにパディングまたはボーダーを設定するだけです