รูปแบบ Min-Width และ Max-Width

ภาพรวมของ min-width และ max-width

max-width สำหรับเนื้อหาที่อ่านง่าย

<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>

max-width สำหรับคอนเทนเนอร์ที่จัดกึ่งกลาง

<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>

min-width เพื่อป้องกันการยุบตัว

<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
  <tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>

ปรับขนาดได้ภายในขอบเขต

<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>

max-width: 100% สำหรับรูปภาพที่ปรับตามหน้าจอ

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />

ใช้ min() แทน max-width โดยไม่ต้องใช้ตัวแปร CSS

<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>

min-content และ max-content เป็นค่า

<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>

คอลัมน์ตารางที่ใช้ min-width

<table style="border-collapse:collapse;width:100%;">
  <tr>
    <td style="border:1px solid #ccc;">Short</td>
    <td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
  </tr>
</table>

ช่วงความกว้างในมีเดียคิวรี

<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>

คอนเทนเนอร์ที่มีระยะห่างด้านข้างไม่เท่ากัน

<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน