web-dev-qa-db-ja.com

パディングされた子要素がその親をオーバーフローするのを防ぐ方法は？

この例 からわかるように、inputはその親divを「オーバーフロー」しているようです。 inputを親からオーバーフローさせずに、パディングを追加したいと思います。

すべてのブラウザ（IE、Firefox、Chromeなどを含む）に最適なソリューション/回避策を知りたいです。

htmlcsswidthpadding
8
Ricardo Rodrigues

この回答 が表示されますが、気に入らない場合は、次のようにbox-sizingCSS3プロパティを使用できます。

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ライブjsFiddleの例

25
Fong-Wan Chau

パディングはオブジェクトの幅を増やします。 1つのオプションは、入力から左/右のパディングを削除し、テキストインデントを使用することですが、これにより右のパディングが削除されます。

.inside{
    background: blue;
    border: none;
    padding-bottom: 10px;
    padding-top: 10px;
    text-indent: 10px;
    width: 100%;
}

または、パディングにハードコードされたピクセル幅を使用する代わりに、パーセンテージを使用して、幅からその値を差し引くこともできます。

.inside{
    padding: 3%;
    width: 94%;
}
2
webdevkit

内部divの幅を100%として指定しないでください。 divは、その親コン​​テナの幅に自動的に適合します。 デモ

0
sachleen

入力はdiv内にあるように見えますが、左上隅にあります。入力はdivの幅の100％を占めるため、divの赤い背景を覆い隠します。 divが長いので、下に突き出て、入力が上にあるように見えます。以下をせよ：

  • 入力ボックスではなく、外側のdivのCSSにパディングを適用します。
    必要に応じて入力にマージンを適用できますが、含まれているdivをパディングする方が良いと思います。
    • 入力ボックスの幅をdivより小さくします（<100％）
0
GrantVS