ความแตกต่างระหว่าง PX, EM และเปอร์เซ็นต์

หน่วย px กำหนดหน่วยวัดเป็นพิกเซลของหน้าจอ ต่อไปนี้เป็นตัวอย่าง −

div {
   padding: 40px;
}

หน่วย em เป็นการวัดสัมพัทธ์สำหรับความสูงของแบบอักษรในพื้นที่ว่าง เนื่องจากหน่วย em นั้นเทียบเท่ากับขนาดของฟอนต์ที่กำหนด หากคุณกำหนดฟอนต์เป็น 12pt แต่ละหน่วย "em" จะเป็น 12pt; ดังนั้น 2em จะเป็น 24pt.

ต่อไปนี้เป็นตัวอย่าง −

p {
   letter-spacing: 4em;
}

หน่วย % กำหนดการวัดเป็นเปอร์เซ็นต์ที่สัมพันธ์กับค่าอื่น โดยทั่วไปแล้วจะเป็นองค์ประกอบที่ล้อมรอบ

p {
   font-size: 14pt;
   line-height: 80%;
}