最近のプロジェクトで遭遇した問題の例を次に示します。
ボックスをクリックして .highlighted-node クラスを追加すると (border-width と border-color を変更する)、ボックスの内容が chrome と safari で少し右に移動し、以前に強調表示されたボックスの内容が移動することに注意してください。左の方です。奇妙なのは、Chrome の開発ツールを使用して 2 つのクラスのいずれかのスタイルに触れようとすると、すべての div のコンテンツが元の位置に戻ることです。
このシフト動作が発生しないようにするために、ここで何か不足していますか?
幅と高さをいじる代わりに、パディングを変更して境界線を置き換えることができます。
.node では、ボーダーは 1px で、パディングはすべての辺で 4px です。.highlighted-node では、ボーダーは 5px であるため、パディングは 4px 小さくする必要があります (=0px)。
または、上部パディングが 15px/11px の場合:
ソリューションが機能しなかった理由を説明するには:
幅と高さを変更するため、ボックスのサイズは変わりませんが、ボックスの内容は左 (および上) に配置されるため、ボックスの幅と高さの影響をまったく受けません。
コンテンツの左位置 = ボックス マージン + ボーダー + パディング。したがって、あるケースでは 10 + 1 + 5 = 16px であり、別のケースでは 10 + 5 + 5 = 20px であり、4px 右 (および下) にシフトします。