【学習ノート】CSSが深く理解するpadding

張鑫旭のCSSは深く理解するpadding学習ノート

paddingと容器の寸法

block要素

padding値が大きすぎて、一定の影響元素サイズ

widthは定値であり、paddingは要素サイズ

に影響する.

widthはautoまたはbox-sizingはborder-boxであり、padding値は暴走せず、元素サイズ

に影響しない.
Inline要素:水平paddingは寸法に影響し、垂直paddingは寸法に影響しませんが、占有空間に影響します(背景色が表示されます)

padding負値とパーセント単位

padding負の値

はサポートされていません.

paddingパーセント自己幅に対して

を計算する.

inline要素のpadding断行効果

空のinline要素paddingのアスペクトは等しくありません.inlineの垂直paddingは隠しテキストノードに

を表示させるからです.

ラベル要素の組み込みpadding

ol/ul

ol/ul要素内蔵padding-left、単位はpxでem

ではありません

ピッチ固定、サイズが小さすぎてピッチが大きすぎ、サイズが大会オーバーフロー容器

radio/checkbox
paddingを設定できません
button
FireFox下クリアボタンpadding

button::-moz-focus-inner {
    padding: 0; 
}

FireFoxの下ボタンの高さ計算の問題で互換性の問題が発生するため、一般的にカスタムボタンを使用します