EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
既定の言語として設定します。
PF の質問 - フォーラム

パディングを加えることによって HTML 要素のサイズの増加を防止する方法

CSS プログラミング  
 
パディングを加えることによって HTML 要素のサイズの増加を防止する方法

我々 が扱うとき HTML スタイルの葉 CSS あります、 動作 我々 のデザインは、ページの要素の これまでは、します。 どう思われるかは、正しいことになります。. これらのケースで, 陥れることがあります。 インターネット 調査し、可能な限り与えることについてのお問い合わせ ソリューション 私たちの問題を解決できます。.

この場合, についてお話しましょう、 動作 それらがあります。 HTML 要素 それを割り当てるとき、 パディング. たとえば、要素があります。 div 1 つと 既定の幅と高さ, ピクセルまたはパーセンテージ, 最高の寸法を表示するのには、エッジを割り当てた:

見ることができる、 [CSS] タブ, このコンテナーは、 の、 75% 1 つ 高さ100 ピクセル.

今のところ, いただきます、 パディング20 ピクセル それぞれの側に:

我々 はそれを見ることができます。, 今のところ, 、 コンテナー プレゼント、 パディング テキストのエッジを分離するには, しかし、加えて, 、 コンテナーのサイズが増加しています。, すなわち, 幅と高さになりました 40 ピクセル ために、 パディング その辺のそれぞれに割り当てられています。.

これを避けるために, プロパティを使用しています。 ボックス サイズ コンテナー, いるので、 サイズ 同じの 含まれます また、 パディング. これを行うに, 我々 は単に値を割り当てる ボックス サイズ: 境界ボックス CSS で, 次の結果が得られ、:

この方法では, コンテナー 維持します。パディング 割り当てられています。, の 20 ピクセル, 増やすことがなく その 寸法 定義 済み.

我々 は何を見ています。, これらの要素にも発生します 入力 フォーム, どういうこと, 目的のデザインにそれらを一致するように, 我々 はのビットを持っている必要があります。 スキル.

つもりです。 追加 要素 入力テキストを入力します。 に、 コード 我々 はすでにあります。, 行いますと、 入力 1 つと の、 100% 親コンテナーから, と、 パディング5 ピクセル 上部および下の側面の, と 10 ピクセル 右と左の.

何が起こるか? 私たちの新しい 要素 入力 外寸法 親コンテナーから, 幅を設定しても、 100%. どのようにそれを修正します。? として、同様にそのコンテナーと同様に, つもりです。 彼を割り当てる プロパティ ボックス サイズ 値を持つ 境界ボックス:

出来上がり! ここで我々 として参照してください。 使用してください。プロパティ ボックス サイズ 割り当てると、 境界ボックス, 我々 はそれを行うことができます、 HTML 要素 当社のウェブサイトは、します。 完璧にフィットします。, で サイズ, 代入する値, 回避します。 これらのこと 成長 とき 割り当てる いくつかの種類の パディング それらに.

私達にコメントを残すかへの入力、フォーラム
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page