การจัดวางครั้งแรก

แยกแยะองค์ประกอบแบบบล็อกจากองค์ประกอบแบบอินไลน์ และเรียนรู้เทคนิคคลาสสิกในการจัดองค์ประกอบให้อยู่กึ่งกลาง

10 นาที · 3 คำถาม

กล่องต่าง ๆ จัดเรียงตัวเองบนหน้าอย่างไร? ทั้งหมดขึ้นอยู่กับ โหมดการแสดงผล (display mode) ของมัน ซึ่งควบคุมด้วยคุณสมบัติ display องค์ประกอบแบบ บล็อก (block) ทำตัวเหมือนก้อนอิฐ มันกินความกว้างที่มีอยู่ทั้งหมดและดันองค์ประกอบถัดไปไปยังบรรทัดใหม่ หัวข้อ <h1> ย่อหน้า <p> และแท็ก <div> (กล่องทั่วไปที่ไม่มีความหมายเฉพาะ) เป็นแบบบล็อกโดยค่าเริ่มต้น องค์ประกอบแบบ อินไลน์ (inline) ทำตัวเหมือนคำในประโยค มันกินเพียงพื้นที่ของเนื้อหาและอยู่ข้าง ๆ องค์ประกอบข้างเคียง ลิงก์ <a> และแท็ก <span> (คู่แบบอินไลน์ของ <div>) เป็นแบบอินไลน์โดยค่าเริ่มต้น

<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>

คุณสมบัติ display ให้คุณเปลี่ยนพฤติกรรมนี้ได้ display: block; บนลิงก์ทำให้มันกินความกว้างทั้งหมด display: inline; บน <div> ทำให้มันไหลไปในข้อความ ระวังข้อจำกัดสำคัญขององค์ประกอบแบบอินไลน์ คุณสมบัติ width และ height จะ ถูกละเลย (ignored) บนมัน ในการกำหนดขนาดองค์ประกอบ มันต้องเป็นแบบบล็อก

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

มาถึงการจัดกึ่งกลาง คำถามที่ผู้เริ่มต้นทุกคนถาม กรณีแรก: การจัดข้อความให้อยู่กึ่งกลาง ภายในกล่อง คุณสมบัติ text-align: center; ถูกนำไปใช้กับตัวคอนเทนเนอร์และจัดเนื้อหาแบบอินไลน์ (ข้อความ ลิงก์ รูปภาพ) ให้อยู่กึ่งกลาง กรณีที่สอง: การจัดกล่องแบบบล็อกทั้งกล่องให้อยู่กึ่งกลาง เช่น การ์ดตรงกลางหน้า เทคนิคคลาสสิก: กำหนดความกว้างให้กล่อง จากนั้นเขียน margin: 0 auto; ค่า auto ขอให้เบราว์เซอร์คำนวณมาร์จินซ้ายและขวาเอง มันทำให้ทั้งสองด้านเท่ากัน ซึ่งจัดกล่องให้อยู่กึ่งกลาง

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

มาทบทวนสิ่งที่คุณได้เรียนรู้ในโมดูลนี้กัน คุณรู้วิธีเชื่อมไฟล์ CSS เขียนกฎด้วยตัวเลือก คุณสมบัติ และค่า เจาะจงองค์ประกอบด้วยแท็ก คลาส หรือไอดี ปรับสมดุลแพดดิง เส้นขอบ และมาร์จิน จัดสไตล์ข้อความ และตอนนี้ก็จัดวางและจัดกล่องให้อยู่กึ่งกลาง ด้วยพื้นฐานเหล่านี้ คุณสามารถสร้างหน้าเว็บที่เรียบง่ายและดูดีได้แล้ว โมดูลถัดไปจะแนะนำเครื่องมือจัดวางที่ทรงพลังกว่าให้คุณ

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. อะไรคือความแตกต่างระหว่างองค์ประกอบแบบบล็อกกับองค์ประกอบแบบอินไลน์?
   • บล็อกไม่สามารถบรรจุข้อความได้ ส่วนอินไลน์ทำได้
   • บล็อกกินความกว้างทั้งหมดและขึ้นบรรทัดใหม่ ส่วนอินไลน์อยู่ในกระแสของข้อความ
   • อินไลน์ใหญ่กว่าบล็อกเสมอ
2. คุณจะจัดกล่องแบบบล็อกที่กว้าง 300 พิกเซลให้อยู่กึ่งกลางในแนวนอนได้อย่างไร?
   • text-align: center; บนตัวกล่องเอง
   • margin: 0 auto; พร้อมกับความกว้างที่กำหนดไว้
   • padding: auto; บนกล่อง
3. ทำไม width: 200px; จึงไม่มีผลกับ <span> โดยค่าเริ่มต้น?
   • เพราะ span ปฏิเสธคุณสมบัติ CSS ทั้งหมด
   • เพราะ 200 พิกเซลเกินขนาดสูงสุดของ span
   • เพราะ span เป็นแบบอินไลน์ และ width ถูกละเลยบนองค์ประกอบแบบอินไลน์