html - 子パディングが親要素の外にある

Question

子要素にパディングを適用すると、子要素がそれを含む親要素の境界を越えて描画されます。マージン、パディング、コンテンツ幅のサイズの考慮事項について説明していただけますか。

パディングを増やす場合、子のパディングも考慮して、親もすべての子の累積サイズにサイズ変更しないのはなぜですか?

 <div>
       <ul>
          <li><a>srikanth</a>
           </li>
           <li><a>sunkist</a>
        </li>
        <li><a>sunday</a>
        </li>
    </ul>
    </div>



div {
     margin-top:90px;
    margin-left:90px;
    background-color:#676896;
   }
   ul {
     list-style-type:none;
   }
    ul li {
    display:inline-block;
   }
   a {
    background-color:#c34567;
    padding:10px 10px 10px 10px;
   }

この問題を克服するために考慮すべきコーディング手法は何ですか?

わかりました、うまくいく答えがたくさんありました。子要素に基づく親サイズの計算を誰でも説明できますか? 包囲する親のサイズを計算する際に考慮される子の特徴は何ですか。パディング全体が考慮される場合、考慮されない場合は?

score 51 · Accepted Answer

子が親の境界をオーバードローしていた理由は、子が<a>デフォルトであるタイプのタグであるためですdisplay:inline（クロム開発者ツールに移動して、計算されたスタイルの下に表示されるかどうかを確認できます）。インライン要素はテキスト行のように表示されます。そのため、幅と高さ、およびブロックとは非常に異なるすべてのものを処理する方法 (たとえば、div はデフォルトでブロックです)。

そうは言っても、a の表示設定を変更すると、display:inline-blockのインラインプロパティを保持できますが<a>、同時にブロックプロパティも取得できます。つまり、親ノードによって認識されるパディングと幅と高さがあります。次に、それに対応するように拡張します。

したがって、これに関するベストプラクティスはありません。inline唯一のベストプラクティスは、各表示プロパティの意味 ( vs blockvs )を理解inline-blockし、適切に使用することです。

score 11 · Accepted Answer

使用するdisplay:inline-block;

a {
    background-color: #C34567;
    display: inline-block;
    padding: 10px;
}

デモを見る

インライン要素の前後には改行がなく、横に HTML 要素を許容します。

ブロック要素の上下には空白があり、その隣にある HTML 要素は許容されません。

inline-block 要素は、インライン要素として (隣接するコンテンツと同じ行に) 配置されますが、ブロック要素として動作します。

http://www.w3schools.com/cssref/pr_class_display.asp

score 3 · Accepted Answer

aタグを変更せずに解決できます。要素にoverflow: hidden;プロパティを追加するだけです。div

div {
  margin-top:90px;
  margin-left:90px;
  background-color:#676896;
  overflow: hidden; /*expends its height if not fixed*/
}

ここでフィドルを更新しました： http://jsfiddle.net/NkXUW/52/

score 2 · Accepted Answer

必要に応じて親を展開するには、要素に追加display: block;する必要があります。<a>このフィドルを参照してください

score 0 · Accepted Answer

マージンとパディングの違いについては、これを読んでください。

私はこれが正しいとは思わfloatないdiv wrapper

動作デモ

div {
    float:left;
    margin-top:90px;
    margin-left:90px;
    background-color:#676896;
}

これがあなたを助けることを願っています..

html - 子パディングが親要素の外にある

5 に答える 5

デモを見る

Related

Reference