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

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

更新

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

私は最近、別の質問に答えました。そこでは、ボックスモデルが現在の方法である理由を説明しました。

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

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

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

なぜnegative padding有用で素晴らしいのかについて、非常に良い例を紹介したいと思います。

CSS開発者全員が知っているように、動的サイズ変更divを別のdiv内で垂直方向に揃えるのは面倒であり、ほとんどの場合、CSSを使用するだけでは不可能であると見なされています。の組み込みは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のコンテンツの高さの50％の距離だけ内側のdivのコンテンツを上方にシフトしました。したがって、内側のdivのコンテンツを外側のdivの中央に配置し、インナーdivを動的に！

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

ところで、これは役立つかもしれません：

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

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

あなたはなぜそれをごまかすのではなく、なぜ尋ねました：

通常、初期実装のプログラマーの怠惰のため、彼らはすでに他の機能により多くの労力を費やしており、フロートのようなより奇妙な副作用をもたらしています。これを可能にするため、FOURプロパティを使用して要素をその隣接要素に対してプッシュ/プルできます（プッシュするのは4つ、プルするのは2つだけです）。

htmlがデザインされたとき、雑誌は当時の画像の周りにテキストを流し込むのが好きでしたが、今日はタッチトレンドがあるため嫌いになりました。そのため、センターよりもフロートに圧力をかけmargin-top: fill;たりmargin: average 0;、コンテンツを下に揃えたり、余計なスペースを配置したりするように設計することができます。

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

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

これが（おそらく）パディングが幅で計算される理由です。これは、それがペイントを開始したときに利用可能だった値だからです。

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

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

InDesignのように、複雑なリフローと配置を伴うアプリケーションを見つけた場合、それほど速くスクロールすることはできません！次のページにジャンプするには、プロセッサとグラフィックカードの両方から多大な労力が必要です。

したがって、いったん描画された要素についてペイントして計算し、要素について忘れると、今のところそれは必須のようです。

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

負のマージンは簡単な解決策になります。

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

はい、これは2019年のCSS3にも関連しています。適切なケース：フレックスボックスのレイアウト。フレキシボックスのアイテムの余白が均等にスペース彼らにそうために、崩壊しないと、そのコンテナのパディングからマージンコンテナの視覚的なエッジでそれらを合わせ、1項目減算する必要がありますを。結果が0未満の場合は、コンテナーで負のマージンを使用するか、その負の値を既存のマージンと合計する必要があります。つまり、要素のコンテンツは、要素のマージンをどのように定義するかに影響します。フレックス要素のコンテンツに異なる単位で定義されたマージンがある場合、または異なるフォントサイズなどの影響を受ける場合、合計は正常に機能しません。

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

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プリプロセッサを使用することを余儀なくされました、など