ใช้คุณสมบัติ CSS overflow เพื่อแก้ไขปัญหาเนื้อหาที่ล้นออกนอกพื้นที่ที่กำหนด คุณสามารถลองรันโค้ดตัวอย่างต่อไปนี้:ตัวอย่าง<html>    <head>    </head>    <style>       .scroll{          display:block;   &

คุณสมบัติ overflow ใน CSS บอกเบราว์เซอร์ว่าทำอย่างไรเมื่อเนื้อหาใน Box ใหญ่กว่า Box เอง ค่า (Value)คำอธิบาย (Description) visibleเนื้อหาล้นออกนอกขอบ Element (ค่าเริ่มต้น) hiddenตัดเนื้อหาที่ล้นออก ไม่แสดง Scrollbar scrollแสดง Scrollbar เสมอ แม้เนื้อหาจะไม่ล้นก็ตาม autoแสดง Scrollbar เฉพาะเมื่อเน

เพื่อซ่อน Element จากมุมมอง ใช้ visibility ค่า hidden Element จะหายไปแต่ยังคงครอบครองพื้นที่ใน Layout ตัวอย่าง <html> <head></head> <body> <p>This paragraph should be visible.</p> <p style=visibility:hidden;> This paragraph should not be visi

เพื่อตั้งค่า Outline ให้เป็นเส้นขีด ใช้ outline-style ค่า dashed ตัวอย่าง <html> <head></head> <body> <p style=outline-width:6px; outline-style:dashed;> This text is having 6px dashed outline. </p> </body> </html>

คุณสมบัติ height ใช้กำหนดความสูงของ Box รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือ auto ตัวอย่าง <html> <head></head> <body> <p style=width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;> This paragraph is 200pixels wide and 50 pixels high

คุณสมบัติ max-height ใช้กำหนดความสูงสูงสุดที่ Box สามารถมีได้ ค่าเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=width:400px; max-height:10px; border:2px solid green; padding:10px; margin:15px;> This paragraph is 400px wide

คุณสมบัติ width ใช้กำหนดความกว้างของ Box รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือ auto ตัวอย่าง <html> <head></head> <body> <p style=width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;> This paragraph is 200pixels wide and 50 pixels high

คุณสมบัติ visibility ค่า hidden ใช้ซ่อน Element แต่ยังคงครอบครองพื้นที่ใน Layout (ต่างจาก display: none ที่เอาพื้นที่ไปเลย) ตัวอย่าง <html> <head></head> <body> <p>This paragraph should be visible in normal way.</p> <p style=visibility:hidden;>

คุณสมบัติ line-height ใช้กำหนดความสูงของบรรทัดข้อความ ค่าเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line-height:30px;> This paragraph is 300

คุณสมบัติ max-height ใช้กำหนดความสูงสูงสุดที่ Box สามารถมีได้ ค่าเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=width:400px; max-height:10px; border:2px solid green; padding:10px; margin:15px;> This paragraph is 400px wide

คุณสมบัติ min-width ใช้กำหนดความกว้างต่ำสุดที่ Box สามารถมีได้ ค่าเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;> This paragraph is 100px high

คุณสมบัติ height ใช้กำหนดความสูงของ Box รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือ auto ตัวอย่าง <html> <head></head> <body> <p style=width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;> This paragraph is 200pixels wide and 50 pixels high

คุณสมบัติ width ใช้กำหนดความกว้างของ Box รับค่าเป็นความยาว, เปอร์เซ็นต์, หรือคีย์เวิร์ด auto ตัวอย่าง <html> <head></head> <body> <p style=width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;> This paragraph is 200pixels wide and 50 p

ด้วย CSS cursor property สามารถแสดงเคอร์เซอร์แบบต่างๆ เช่น crosshair, pointer, move เป็นต้น ตัวอย่าง <html> <head></head> <body> <div style=cursor:auto>Auto</div> <div style=cursor:crosshair>Crosshair</div> <div style=cursor:default>D

คุณสมบัติ outline-width ใช้กำหนดความหนาของ Outline รับค่าเป็นความยาว (px, em) หรือคีย์เวิร์ด thin, medium, thick ตัวอย่าง <html> <head></head> <body> <p style=outline-width:thin; outline-style:solid;> This text is having thin outline. </p> <

คุณสมบัติ outline เป็น Shorthand Property รวม outline-color, outline-style, outline-width ในการประกาศเดียว ตัวอย่าง <html> <head></head> <body> <p style=outline: thin solid green;> This text is having thin solid green outline. </p> <br />

คุณสมบัติ outline-style ใช้ระบุรูปแบบเส้นที่ล้อมรอบ Element ตัวอย่าง <html> <head></head> <body> <p style=outline-width:thin; outline-style:solid;> This text is having thin solid outline. </p> <br /> <p style=outline-width:thick; o

คุณสมบัติ outline-color ใช้กำหนดสีของ Outline รับค่าเป็นชื่อสี, รหัส Hex, หรือค่า RGB ตัวอย่าง <html> <head></head> <body> <p style=outline-width:thin; outline-style:solid; outline-color:blue> This text is having thin solid blue outline. </p> </

คุณสมบัติ outline เป็น Shorthand Property ที่รวม outline-width, outline-style, outline-color ในบรรทัดเดียว ตัวอย่าง <html> <head></head> <body> <p style=outline: thin solid green;> This text is having thin solid green outline. </p> <br />

เพื่อตั้งค่า Outline ให้เป็นสองเส้นทึบ ใช้ outline-style ค่า double ตัวอย่าง <html> <head></head> <body> <p style=outline-width:7px; outline-style:double;> This text is having 7px double outline. </p> </body> </html> หมายเหตุ: ต้องตั้ง