การใช้งาน Padding ช่วยจัดรูปภาพหรือข้อความ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4859
Joined: 08/01/2018 10:03 am

การใช้งาน Padding ช่วยจัดรูปภาพหรือข้อความ

Post by Parichat »

การใช้งาน Padding ช่วยจัดรูปภาพหรือข้อความ

ในการจัดข้อความที่อยู่ในแท็ก <div> โดยอยากให้ข้อความหรือรูปภาพอยู่ห่างจากขอบจอไม่ว่าจะเป็นซ้ายหรือขวาไม่ว่าจะเป็นบนหรือล่างก็สามารถจัดได้โดยใช้ css เข้ามาช่วยโดยคำสั่ง css ที่จะช่วยได้นั้นก็คือคำสั่ง Padding โดยสามารถช่วยให้ข้อความหรือรูปภาพของเราอยู่ในตำแหน่งที่เราต้องการได้

ตัวอย่างอยากให้ได้ผลลัพธ์ดังรูป
p5.jpeg
p5.jpeg (40.26 KiB) Viewed 878 times
วิธีการทำ
  • 1.สร้าง class ในไฟล์ css

    Code: Select all

    .paddingtest{
                    ......คำสั่ง css........
    }
    
    2.จากนั้นเพิ่มคำสั่ง cssลงไปใน class ที่สร้างไว้

    Code: Select all

    .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 และกำหนดสีของเส้นเป็นสีฟ้า
    4.นำชื่อ class ไปใส่ใน class ที่อยู่ในแท็ก <div>

    Code: Select all

    <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>
    
ในการจัดข้อความหรือรูปภาพเราจะใช้คำสั่ง Padding จะใช้จัดข้อความที่อยู่ในแท็ก <div> จะต่างกับ Margins ที่จะจัดข้อความหรือรูปภาพที่มีแท็ก <div> คล่อมอยู่

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests