ความกว้างของ CSS พอดีกับเนื้อหา

นี่คือผลลัพธ์ของโค้ด HTML:

ถึงตอนนี้ เราได้พูดถึงหน้า HTML แล้ว ในหัวข้อถัดไป เราจะใช้สไตล์ CSS ต่างๆ กับองค์ประกอบ HTML เพื่อให้ดูดีขึ้น ในตัวอย่างต่อเนื่อง เราจะตรวจสอบพฤติกรรมของ “ ความกว้าง “ทรัพย์สินมีค่า” พอดีเนื้อหา ” ใน CSS

สไตล์ 'กล่อง' div

“ .กล่อง ” หมายถึงกล่องคลาส div ด้านล่างนี้เป็นคุณสมบัติที่ใช้กับมัน:

• • “ ความกว้าง ”ทรัพย์สินมีค่า” พอดีเนื้อหา ” ใช้พื้นที่ที่มีอยู่ แต่จะไม่เกินเนื้อหา
  • “ ความสูง ” เป็นคุณสมบัติที่กำหนดความสูงขององค์ประกอบ
  • “ สี ” กำหนดสีตัวอักษรขององค์ประกอบ
  • “ การขยายความ คุณสมบัติ ” สร้างช่องว่างภายในเส้นขอบขององค์ประกอบหรือรอบ ๆ เนื้อหา
  • “ ขอบ ” กำหนดพื้นที่รอบ ๆ องค์ประกอบ
  • “ ขนาดตัวอักษร คุณสมบัติ ” กำหนดขนาดตัวอักษร

สไตล์ div “สี-1”

“ สีพื้นหลัง ” คุณสมบัติถูกตั้งค่าเป็น “ .สี-1 ” แผนก

สไตล์ 'สี-2' div

สไตล์ div “สี-3”

สังเกตได้ว่าความกว้างขององค์ประกอบถูกกำหนดให้เท่ากับเนื้อหา:

เยี่ยมมาก! เราได้เรียนรู้การใช้ CSS เรียบร้อยแล้ว “ ความกว้าง ”ทรัพย์สินมีค่า” พอดีเนื้อหา '.

บทสรุป

คุณสมบัติความกว้างของ CSS ช่วยให้เราสามารถใช้ค่าต่างๆ ค่าเหล่านี้มีหน่วยเป็นเปอร์เซ็นต์ พิกเซล หรือมากกว่านั้น หากต้องการตั้งค่าตามเนื้อหา ให้คลิก “ พอดีเนื้อหา ” สามารถตั้งค่าได้ โพสต์นี้ได้อธิบายคุณสมบัติความกว้างของ CSS ด้วยค่าที่พอดีกับเนื้อหาพร้อมการสาธิตการใช้งานจริง