ในการจัดข้อความที่อยู่ในแท็ก <div> โดยอยากให้ข้อความหรือรูปภาพอยู่ห่างจากขอบจอไม่ว่าจะเป็นซ้ายหรือขวาไม่ว่าจะเป็นบนหรือล่างก็สามารถจัดได้โดยใช้ css เข้ามาช่วยโดยคำสั่ง css ที่จะช่วยได้นั้นก็คือคำสั่ง Padding โดยสามารถช่วยให้ข้อความหรือรูปภาพของเราอยู่ในตำแหน่งที่เราต้องการได้
ตัวอย่างอยากให้ได้ผลลัพธ์ดังรูป วิธีการทำ
- 1.สร้าง class ในไฟล์ css
2.จากนั้นเพิ่มคำสั่ง cssลงไปใน class ที่สร้างไว้
โค้ด: เลือกทั้งหมด
.paddingtest{ ......คำสั่ง css........ }
คำอธิบายโค้ด: เลือกทั้งหมด
.paddingtest{ background-color: #99ffff; padding-top: 60px; padding-right: 60px; padding-bottom: 60px; padding-left: 70px; border: 3px solid #33ccff; }
- background-color คือใส่สีพื้นหลังเป็นสีฟ้า
padding-top คือคำสั่งให้ข้อความหรือรูปภาพห่างจากขอบที่อบู่ด้านบน 60px
padding-right คือกำหนดให้ข้อความหรือรู้ภาพห่างจากขอบที่อยู่ฝั่งขวาเป็น 60px
padding-bottom คือกำหนดให้ข้อความหรือรูปภาพห่างจากขอบที่อยู่ด้านล่างเป็น 60px;
padding-left คือกำหนดให้ข้อความหรือรูปภาพห่างจากขอบที่อยู่ฝั่งซ้ายเป็น 70px;
border คือการกำหนดเส้นขนาด 3px และกำหนดสีของเส้นเป็นสีฟ้า
โค้ด: เลือกทั้งหมด
<html> <head> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="paddingtest"> <img src="img/cute-3206543_960_720.jpg" alt="" width="100%" /> This div element has a top padding of 60px, a right padding of 60px, a bottom padding of 60px, and a left padding of 70px. </div> </div> </body> </html>
- background-color คือใส่สีพื้นหลังเป็นสีฟ้า
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css