Bagaimana untuk menyemak sifat lebar pemilih kelas CSS? Contohnya ialah .label{}

Question

Berikut ialah ulasan saya pada kod css di mana saya memilih lebar 270 untuk .label:

Jika anda memeriksa elemen .label menggunakan alat pembangun penyemak imbas anda, anda mungkin dapati bahawa ia sebenarnya adalah 288 piksel lebar, bukan 270 piksel lebar. Ini kerana, secara lalai, penyemak imbas menyertakan sempadan dan padding semasa menentukan saiz elemen. < /p>

Ini kod CSS saya:

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

Bagaimana saya boleh menyemak pelayar saya untuk mengesahkan 288px yang dirujuk di sini?

Answer 1

Dalam tab Pemeriksaan (Chrome dalam tangkapan skrin) anda sepatutnya dapat melihat dimensi yang dikira, yang menunjukkan lebar agregat termasuk pelapik, jidar dan jidar.

Dalam kes anda ialah 270px + (7px + 7px) + (2px + 2px) + 0px