Wie überprüfe ich die Eigenschaft width des CSS-Klassenselektors? Ein Beispiel ist .label{}

Question

Hier ist mein Kommentar zum CSS-Code, bei dem ich für das .label eine Breite von 270 gewählt habe:

Wenn Sie das .label-Element mit den Entwicklertools Ihres Browsers untersuchen, stellen Sie möglicherweise fest, dass es tatsächlich 288 Pixel breit ist, nicht 270 Pixel. Dies liegt daran, dass Browser bei der Bestimmung der Größe eines Elements standardmäßig Rahmen und Abstände berücksichtigen. < /p>

Das ist mein CSS-Code:

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;

Wie kann ich in meinem Browser nachsehen, ob die hier genannten 288 Pixel vorliegen?

P粉595605759 · Answer

在“检查”选项卡（屏幕截图中的 Chrome）中，您应该能够看到计算出的尺寸，其中显示了聚合宽度，包括内边距、边框和边距。

在您的情况下，它是 270px + (7px + 7px) + (2px + 2px) + 0px