เพิ่มช่องว่าง รอบข้างรูปภาพ

ถ้าได้ดูบทความก่อนหน้านี้เราจะเห็นได้เลยว่า ตัวหนังสือนั้นเข้ามาติดกับรูปภาพเลยซึ่งอาจจะทำให้ดูไม่สวยงามเท่าไร การแก้ไขก็แก้ด้วยการใช้ vspace และ hspace เพื่อเพิ่มช่องว่างรอบๆรูปภาพนั่นเอง

รูปก่อนการตั้งค่า
สิ่งเพิ่มเติมที่ 5.12 รูปที่มีตัวหนังสือมาติดในแบบที่เป็นแบบปรกติ ก่อนการตั้งค่า

การเพิ่มระยะช่องว่างรอบๆรูป
1.พิมพ์ <img src=”image.location” โดยที่ image.location คือ ตำแหน่งที่ใช้เก็บรูปบน server จริง
2.ถ้าต้องการเพิ่มระยะด้านข้างซ้ายขวา ให้พิมพ์ hspace=”X” โดยที่ X คือตัวเลขมีหน่วยเป็น pixel ที่จะเพิ่มเป็นช่องว่าง
3.ถ้าต้องการเพิ่มระยะด้านบนและล่าง ให้พิมพ์ vspace=”X” โดยที่ X คือตัวเลขมีหน่วยเป็น pixel ที่จะเพิ่มเป็นช่องว่าง
4. ใส่ arttribute อื่นๆได้ตามที่ต้องการ จากนั้นพิมพ์ />

<img src=”mindwebhost_logo.png” align=”left” width=”90px” height=”150px” hspace=”20″ vspace=”20″ alt=”host คุณภาพ บริการด้วยใจ”/>
<h3>MindWebHost host ที่บริการด้วยใจ</h1>
<p> หากคุณกำลังมองหา host สำหรับเว็บของคุณ
mindwebhost.com เป็นตัวเลือกสำหรับคุณแล้ว
บริการอย่างมั่นคงมาตั้งแต่ ปี 2549 จนถึงปัจจุบัน
เน้นคุณภาพไม่ใช่ปริมาณ มั่นใจได้ในคุณภาพ</p>
สิ่งเพิ่มเติมที่ 5.13 โค้ดเพื่อการแสดงผลช่องว่าง ด้านซ้ายและขวา และช่องว่างด้านบนและล่าง ขนาด 20 px

ช่องว่างระหว่างรูปและตัวอักษร
สิ่งเพิ่มเติมที่ 5.14 จะมีช่องว่างระหว่างรูปภาพและตัวอักษร ตามที่ได้กำหนดเอาไว้ในโค้ด

เพิ่มเติม
- hspace, vspace สามารถกำหนดได้ใน stylesheet
- คุณไม่สามารถเลือกได้ว่าจะใส่ได้แค่ข้างใดหรือข้างหนึ่ง เช่นซ้ายหรือว่า แต่ว่ามันจะกำหนดให้เป็นค่าตามที่เราใส่ทั้งสองข้าง หากต้องการกำหนดเป็นข้างเดียวให้ใช้ style sheet ช่วย
- ถ้าคุณต้องการ add ช่องว่างแค่ข้างเดียว อาจจะลักไก่ได้ด้วยการเติมช่องว่างด้านข้างสีขาวเข้าไปในรูปเลย โดยอาจจะใช้ photoshop ก็ได้

No comments yet.
You must be logged in to post a comment.