> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# แก้ช่องว่างใต้ SVG อินไลน์ด้วยเค้าโครง CSS

> หาว่าพื้นที่ใต้ SVG อยู่ในกล่องบรรทัด HTML หรือในภาพ แล้วเลือกแสดงแบบบล็อกหรือจัดแนวอินไลน์ พร้อมตรวจผลลัพธ์จริง

Source: https://perfectvector.com/th/blog/inline-svg-baseline-gap

Language: th
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

ช่องว่างแคบใต้ SVG อาจมาจากบรรทัด HTML ที่บรรจุมัน ภาพอินไลน์ร่วมอยู่ในเค้าโครงข้อความ ซึ่งเส้นฐานกับความสูงบรรทัดอาจเหลือพื้นที่ใต้กล่อง สำหรับภาพเดี่ยว ลอง `display: block` สำหรับภาพที่ต้องอยู่ข้างข้อความ ให้เลือกการจัดแนวอินไลน์โดยตั้งใจ

หาตำแหน่งช่องว่างก่อน พื้นที่ **นอกกล่ององค์ประกอบ SVG** ต้องตรวจเค้าโครงหน้า พื้นที่ **ในกล่องนั้น** อาจมาจากพื้นที่วาด SVG หรือกฎการปรับให้พอดี การลากโลโก้ใหม่ไม่แก้ปัญหาแรก คู่มือนี้ช่วยแยกสองกรณีและตรวจการแก้ CSS เฉพาะจุดเล็ก ๆ

## หาว่ากล่องใดมีพื้นที่ว่าง

ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ให้พื้นหลัง SVG กับตัวครอบโดยตรงเป็นสีตัดกัน ตรวจเส้นกรอบองค์ประกอบด้วย พื้นหลังเป็นเครื่องมือวินิจฉัยชั่วคราว ไม่จำเป็นต้องเป็นส่วนของงานส่ง

```css
.logo-wrap {
  background: peachpuff;
}

.logo-wrap > svg {
  background: lightgreen;
}
```

หากสีพีชต่อใต้กล่อง SVG เขียว ให้ตรวจเค้าโครงบรรทัด ระยะรองขอบ เส้นขอบ ความสูง และองค์ประกอบข้างเคียงของตัวครอบ หากเขียวต่อใต้ภาพที่เห็น ให้ตรวจ `viewBox` ขอบเขตภาพที่วาด และการพอดีกับวิวพอร์ต

ทั้งสองอาจเกิดพร้อมกัน การแก้กล่องบรรทัดอาจลบแถบบาง แต่ยังเหลือขอบโปร่งใสใหญ่ในภาพ [คู่มือปรับ SVG ให้พอดี](https://perfectvector.com/th/blog/svg-preserveaspectratio) อธิบายปฏิสัมพันธ์ของสี่เหลี่ยมต้นทางกับวิวพอร์ตปลายทาง อย่ากระชับ `viewBox` จนกว่าจะรู้ว่าพื้นที่ไม่ต้องการอยู่ภายใน

วิธีฝังก็สำคัญ `<svg>` อินไลน์เป็นส่วนของเอกสาร HTML ส่วน `<img src="logo.svg">` โหลดภาพภายนอก ขอบเขตการจัดสไตล์ต่างกันตามที่[คู่มือ SVG อินไลน์เทียบภาพ](https://perfectvector.com/th/blog/inline-svg-vs-img) อธิบาย ในการวินิจฉัยนี้ ให้ตรวจองค์ประกอบที่วางในแถว HTML แทนการถือว่าไฟล์ SVG ทุกไฟล์ฝังเหมือนกัน

## ทำไมเส้นฐานเหลือพื้นที่ด้านล่างได้

บรรทัดข้อความต้องมีที่สำหรับตัวอักษรที่ยื่นต่ำกว่าเส้นฐาน เช่น `g` และ `p` ภาพอินไลน์อาจตรงเส้นฐานนั้น ขณะที่บรรทัดที่ครอบยังยื่นต่ำกว่า นี่จึงเป็นเหตุที่ตั้งระยะขอบภาพเป็นศูนย์แล้วอาจไม่มีอะไรเปลี่ยน

[กฎคำนวณความสูงบรรทัด CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) กำหนดกล่องบรรทัดจากกล่องที่ร่วมอยู่และการจัดแนว ฟอนต์กับความสูงบรรทัดของตัวแม่มีส่วนแม้เนื้อหาที่มองเห็นเป็นภาพ ดังนั้นแถบที่แน่นอนเป็นผลของสไตล์รอบข้าง ไม่ใช่ระยะขอบคงที่ของ SVG

อย่าสับสนเส้นฐานนี้กับเส้นฐานตัวอักษรที่วาด *ใน* SVG การเปลี่ยน `dominant-baseline` บนองค์ประกอบข้อความ SVG จัดการตัวอักษรภายใน ไม่ได้เลือกว่าองค์ประกอบภาพทั้งหมดอยู่ตรงไหนในบรรทัด HTML

### ตัวอย่างที่วัดโดยไม่มีพื้นที่วาด SVG ว่าง

เราสร้างหน้า HTML ต้นฉบับที่มี SVG เดียวกันสามสำเนา แต่ละ SVG มี viewBox `240 × 100` ซึ่งสี่เหลี่ยมเติมเต็มขอบจรดขอบ และเรนเดอร์ที่ `240 × 100` พิกเซล CSS แถวใช้ Arial ขนาด `40px` และความสูงบรรทัด `48px` เปลี่ยนเฉพาะการแสดงหรือจัดแนว SVG

เบราว์เซอร์คืนค่าการวัดองค์ประกอบดังนี้:

| วิธีจัด SVG        | ความสูง SVG | ความสูงแถว | พื้นที่ใต้กล่อง SVG |
| ------------------ | ----------- | ---------- | ------------------- |
| อินไลน์ ตรงเส้นฐาน | 100px       | 110.5px    | 10.5px              |
| แสดงแบบบล็อก       | 100px       | 100px      | 0px                 |
| อินไลน์ จัดชิดล่าง | 100px       | 100px      | 0px                 |

![ภาพเทียบในเบราว์เซอร์ของ SVG ทึบเดียวกัน แสดงแถบ 10.5 พิกเซลใต้รุ่นอินไลน์ตรงเส้นฐาน และไม่มีแถบในรุ่นบล็อกกับชิดล่าง](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*สี่เหลี่ยมที่วาดเติมเต็ม SVG แต่ละชิ้น แถบพีชใต้กล่องเขียวแรกอยู่ในแถว HTML ไม่ใช่พื้นที่เกินใน viewBox*

นี่คือค่าจากหน้านี้ในเบราว์เซอร์เดียว ไม่ได้สัญญาว่าทุกเค้าโครงจะมีช่อง 10.5px เราเทียบพิกัดล่างตัวครอบกับพิกัดล่าง SVG ความสูง SVG คง 100px ทั้งสามกรณี การแก้จึงไม่ได้ย่อหรือตัดภาพ

## ใช้บล็อกสำหรับภาพเดี่ยว

เมื่อโลโก้ควรอยู่ในแถวของตัวเอง ให้ใส่กฎเค้าโครงกับภาพนั้นโดยเฉพาะ:

```css
.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}
```

[เอกสาร display ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) แยกบทบาทบล็อกกับอินไลน์ในเค้าโครงตามลำดับ การทำ SVG เป็นบล็อกนำบทบาทรายการอินไลน์ในบรรทัดข้อความรอบข้างออก ไม่ได้แก้พาธต้นทางหรือลบขอบภาพโปร่งใส

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

เลือกตัวเลือกให้แคบ การใช้ `svg { display: block; }` ทั่วเว็บไซต์อาจย้ายไอคอนที่ตั้งใจอยู่ในป้ายหรือประโยค เลือกคอมโพเนนต์ที่ต้องการภาพเดี่ยว แล้วตรวจการใช้จุดอื่นของมัน

## เก็บภาพข้างข้อความเป็นอินไลน์แล้วเลือกการจัดแนว

สำหรับไอคอนหรือเครื่องหมายเล็กข้างคำ อินไลน์อาจเป็นเค้าโครงที่ตั้งใจ `vertical-align: bottom` จัดขอบระยะขอบล่างให้ตรงล่างบรรทัด `vertical-align: middle` ใช้เส้นฐานและความสูง x ของตัวแม่ ไม่ใช่คำสั่งให้จัดศูนย์กลางเรขาคณิตทุกภาพในทุกกล่อง ดู[นิยาม vertical-align ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align)

```css
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
```

เลือกค่าด้วยการดูป้ายและฟอนต์จริง ไอคอนที่แตะล่างบรรทัดอาจดูต่ำเกินข้างตัวพิมพ์ใหญ่ เครื่องหมายที่จัด `middle` ยังอาจต้องปรับด้วยสายตา เพราะภาพที่เห็นกระจายไม่สม่ำเสมอภายในกล่องของตน

กรณีชิดล่างในตัวอย่างมีแต่ภาพ ยืนยันว่าการจัดแนวนี้ลบแถบในแถวนั้น ไม่ได้ยืนยันว่าทุกแถวผสมข้อความกับไอคอนมีความสูงหรือหน้าตาเดียวกัน

เลี่ยงใช้ `line-height: 0` บนกล่องข้อความร่วมเป็นวิธีแก้แรก เพราะเปลี่ยนเค้าโครงข้อความด้วยพร้อมกับระยะภาพ อาจซ่อนอาการทันทีแต่ทำให้คอมโพเนนต์พึ่งค่าทับภายหลังเมื่อมีคนเพิ่มป้าย เลือกการแสดงหรือจัดแนวที่ต้องการก่อนเปลี่ยนตัวพิมพ์ของตัวแม่

## ตรวจการแก้โดยไม่เปลี่ยนภาพ

เปลี่ยนครั้งละอย่างแล้วตรวจ:

1. **ขอบองค์ประกอบ:** ตอนนี้ช่องที่เห็นอยู่ในหรือนอกกล่อง SVG?
2. **ขนาด:** SVG ยังมีความกว้าง ความสูง และสัดส่วนที่ต้องการหรือไม่?
3. **สิ่งข้างเคียง:** ป้าย ลิงก์ และไอคอนยังอยู่ตำแหน่งที่ควรหรือไม่?
4. **เค้าโครงตอบสนองขนาด:** คอมโพเนนต์ทำงานอย่างไรเมื่อแคบและกว้าง?
5. **สไตล์ที่คำนวณ:** ค่าที่ตั้งใจมีผลหรือถูกกฎที่เจาะจงกว่าทับ?

สำหรับตัวครอบง่ายที่ไม่มีเส้นขอบหรือระยะรอง การเทียบพิกัดล่างกับพิกัดล่างภาพช่วยตรวจได้ ในคอมโพเนนต์จริง ต้องนับระยะรองที่ตั้งใจและเนื้อหาอื่นก่อนเรียกผลต่างว่าข้อผิดพลาด

หากหน้าต้องจัดต่างเมื่อจอเล็ก ให้ตรวจแบบนั้นด้วย การแก้ที่ใช้ได้กับโลโก้เดี่ยวอาจไม่เหมาะกับแถวนำทางที่ข้อความตัดบรรทัด เอาสีพื้นหลังชั่วคราวออกเมื่อระบุตำแหน่งขอบชัดแล้ว

## เมื่อใดการแปลงเวกเตอร์ช่วยกระบวนการนี้

SVG เดิมที่แก้ได้มักต้องแก้ CSS หรือพื้นที่วาดในกรณีนี้ เก็บไฟล์นั้นและวินิจฉัยตำแหน่งก่อนสร้างใหม่

หากเครื่องหมายเองมีเพียง PNG หรือ JPG และต้องการเส้นขอบแก้ได้ ให้[ใช้ PerfectVector แปลงภาพต้นทางเป็นเวกเตอร์](https://perfectvector.com/th/image-to-vector) แล้วตรวจเส้นขอบ ช่องเปิด และพื้นที่วาดต้นทางก่อนวางผลบนหน้า [แบบประเมินคุณภาพการลากเส้น](https://perfectvector.com/th/blog/evaluate-vector-trace-quality) ช่วยตรวจเรขาคณิตแยกนั้น การแปลงเวกเตอร์เตรียมรูปทรง CSS ของหน้ายังควบคุมกล่องบรรทัด HTML

## คำถามที่พบบ่อย

**ทำไม margin: 0 ไม่ลบช่องใต้ SVG?**
พื้นที่อาจอยู่ในบรรทัดข้อความที่ครอบแทนระยะขอบ SVG ตรวจขอบ SVG กับตัวครอบ แล้วทดสอบบล็อกสำหรับภาพเดี่ยวหรือการจัดแนวตั้งที่เหมาะกับภาพอินไลน์

**display: block ตัดพื้นที่ว่างออกจาก SVG ไหม?**
ไม่ มันเปลี่ยนบทบาทองค์ประกอบในเค้าโครง HTML พื้นที่ว่างใน viewBox ยังอยู่และต้องตรวจภาพหรือการพอดีแยก

**ควรใช้ vertical-align: bottom หรือ middle?**
ใช้ค่าที่เหมาะกับแถวจริง Bottom ตรงกับล่างบรรทัด ส่วน middle ใช้เส้นฐานและความสูง x ของตัวแม่ ตรวจผลกับฟอนต์สุดท้ายและข้อความข้างเคียง แทนการถือว่าค่าใดคือการจัดกลางสากล

## แหล่งอ้างอิง

1. [W3C — ความสูงบรรทัดและการจัดแนวตั้ง CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — กล่องที่ร่วมอยู่ การจัดแนว และตัวพิมพ์ตัวแม่มีส่วนต่อความสูงบรรทัดอย่างไร
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — ความต่างระหว่างบทบาทบล็อกกับอินไลน์ในเค้าโครงตามลำดับ
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — การจัดเส้นฐาน ชิดล่าง และกึ่งกลาง รวมถึงกล่องที่พร็อพเพอร์ตีนี้ใช้ได้

***

เริ่มจากเครื่องหมายที่มีแค่ราสเตอร์ใช่ไหม? [เตรียมรูปทรง SVG ที่แก้ได้](https://perfectvector.com/th/image-to-vector) เปรียบเทียบเส้นขอบกับพื้นที่วาดกับต้นทาง แล้วตรวจตำแหน่ง SVG ในคอมโพเนนต์หน้าจริง

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/inline-svg-baseline-gap)
- [หยุดโลโก้ SVG ดันเค้าโครงด้วยการจองพื้นที่](https://perfectvector.com/th/blog/svg-logo-layout-reservation.md)
- [โลโก้ SVG โหมดมืด: เลือกว่าอะไรควบคุมสี](https://perfectvector.com/th/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)