web-dev-qa-db-ja.com

CSSがネガティブパディングをサポートしないのはなぜですか？

私はこれを何度も見てきたが、ネガティブなパディングの見通しは、特定のページ要素のCSSの開発を改善しやすくするかもしれない。それでも、W3C CSSにはネガティブパディングの規定はありません。この背後にある理由は何ですか？プロパティとしての使用を妨げる障害物はありますか？ご回答ありがとうございます。

UPDATE

たとえば、縦方向の間隔が20pxのフォントを使用している場合に、ハイパーリンクなどのフォントの下部に破線の境界線を適用する場合が表示されます。このような場合、指定したWordの下に破線の境界線が20px表示されるため、スタイルが粗末すぎることがわかります。負のマージンを使用すると、マージンは境界の外側の領域を変更するため、機能しません。このような状況では、負のパディングが役立つ場合があります。

htmlcsspadding
117
ikartik90

私は最近 別の質問に答えました 私が議論した場所なぜボックスモデルがそうであるかです。

ボックスモデルの各部分には特定の理由があります。パディングは、コンテンツを超えて背景を拡張するためのものです。コンテナの背景をshrinkする必要がある場合、親コンテナを正しいサイズにし、子要素に負のマージンを与える必要があります。この場合、コンテンツはpaddedではなく、オーバーフローしています。

81
zzzzBov

定義によるパディングは、正の整数（0を含む）です。

負のパディングにより、ボーダーがコンテンツに折りたたまれます（w3の box-model ページを参照）-これにより、コンテンツ領域がコンテンツよりも小さくなり、意味がありません。

5
Oded

negative paddingが便利で素晴らしい理由の非常に良い例を説明したいと思います。

私たち全員が知っているように、動的にサイズ変更するdivを別のdiv内に垂直に配置するのは面倒です。 negative paddingを組み込むと、これが変わる可能性があります。

次のHTMLを確認してください。

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

次のCSSを使用すると、内側divのコンテンツを外側div内で垂直方向に中央に配置できます。

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

説明させてください...

内側のdivの上部を絶対に50％に配置すると、内側のdivの上端が外側のdivの中心に配置されます。ものすごく単純。これは、パーセントベースのポジショニングは親要素の内部寸法に相対的であるためです。

パーセントベースのパディング、一方で、ターゲット要素の内部寸法に基づいています。したがって、padding-top: -50%;のプロパティを適用することにより、内側のdivのコンテンツを内側のdivのコンテンツの高さの50％の距離だけ上方にシフトしました。 内部divの高さ寸法を動的にすることもできます！

OPをお願いした場合、これが最適なユースケースになります。このハックを行えるように実装する必要があると思います。笑。または、vertical-alignの機能を修正し、すべての要素で機能するvertical-alignのバージョンを提供する必要があります。

4
WebWanderer

ちなみにこれは助けになります：

box-sizingCSSプロパティは、要素の幅と高さを計算するために使用されるデフォルトのCSSボックスモデルを変更するために使用されます。

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

1
Rolf

あなたはなぜそれをチートするのではなく、なぜ尋ねました：

通常、初期実装のプログラマーの怠のために、彼らは既に他の機能にもっと努力をして、フロートのような奇妙な副作用をもたらしました。なぜなら、彼らは当時デザイナーからより多くの要求があったが、まだ時間を割いていないからですこれを可能にするために、FOURプロパティを使用して、隣接要素に対して要素をプッシュ/プルできます（プッシュするのは4つ、プルするのは2つだけです）。

Htmlがデザインされたとき、雑誌は当時の画像の周りにテキストがリフローするのが大好きでしたが、今日ではタッチトレンドがあり、多くのスペースがあり読み物のないスクワリーのものが大好きです。そのため、センタリングよりもフロートにより多くの圧力をかけたり、単にコンテンツを下に揃えたり、余分なスペースを分散したりするためにmargin-top: fill;やmargin: average 0;のようなものを設計できたのです。

この場合、CSSが:parent疑似セレクターを持たない理由と同じ理由で、評価がループしないように実装されていないと思います。

エンジニアでなくても、CSSは現在、一度エレメントをペイントするために作られ、将来のエレメントをペイントするためのいくつかのプロパティを覚えていますが、すでにペイントされたエレメントには戻らないことがわかります。

それが（推測）パディングが幅で計算される理由です。なぜなら、それはペイントを開始するときに利用可能な値だからです。

パディングに負の値がある場合、外側の制限に影響します。これは、マージンがすでに設定されているときにすでに定義されています。まだ何も描かれていないことは知っていますが、90年代の技術を持つ天才によって作成された塗装プロセスがどのように進行するかを読むと、愚かな質問をして「ありがとう」と言っているように感じます。

Webページの要件の1つは、時間がかかり、コンピューターリソースを消費して表示する前にすべてを修正できるアプリとは異なり、すぐに利用できることです。Webページはほとんどリソースを使用する必要がありません（したがって、すべてのデバイスに適合します）可能）、そよ風にスクロールされます。

InDesignのように、複雑なリフローと配置のアプリケーションが表示される場合、その速度でスクロールすることはできません！次のページにジャンプするには、プロセッサとグラフィックカードの両方から大きな努力が必要です！

そのため、一度描画した要素をペイントして前方に計算し、忘れてしまいます。今のところは必須のようです。

1
sergio

CSSの設計者には、これがもたらす柔軟性を想像する先見性がなかったためです。隣接する要素との関係に影響を与えずにボックスのコンテンツ領域を拡張する理由はたくさんあります。不可能だと思う場合は、nowrap 'の長いテキストをボックスに入れ、ボックスに幅を設定し、オーバーフローしたコンテンツがレイアウトに何も影響を与えないことを確認します。

はい、これは2019年のCSS3にも関連しています。適切なケース：flexboxレイアウト。 Flexboxアイテムのマージンは折りたたまれないため、それらを均等に配置するにはおよびコンテナの視覚的なエッジに合わせて、コンテナのパディングからアイテムのマージンを差し引く必要があります。結果が0未満の場合、コンテナで負のマージンを使用するか、その負の値を既存のマージンと合計する必要があります。つまり要素のcontentは、そのマージンを定義する方法に影響します（逆方向）。フレックス要素のコンテンツに異なる単位で定義されたマージンがある場合、または異なるフォントサイズなどの影響を受ける場合、加算は正常に機能しません。

以下の例では、理想的には、灰色のボックスが均等に配置されているはずですが、残念ながらそうではありません。

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}
<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

私は長年にわたって小さなネガティブパディングが長い道のりであったこれらの小さな問題に十分に遭遇しましたが、代わりに非セマンティックマークアップを追加し、calc()、またはCSSプリプロセッサを使用する必要があります単位は同じなどです。

0
Walf

Iframeをコンテナ内に収めると、コンテナのサイズと一致しません。約20ピクセルのパディングが追加されます。現在、これを修正する簡単な方法はありません。 JavaScriptが必要です（ http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ ）

負のマージンは簡単な解決策です。

0
john ktejik