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

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

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1702
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 28/06/2018 6:14 pm

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

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

ตัวอย่างอยากให้ได้ผลลัพธ์ดังรูป
p5.jpeg
p5.jpeg (40.26 KiB) เปิดดู 78 ครั้ง


วิธีการทำ
    1.สร้าง class ในไฟล์ css

    โค้ด: เลือกทั้งหมด

    .paddingtest{
                    ......คำสั่ง css........
    }


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

    โค้ด: เลือกทั้งหมด

    .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>

    โค้ด: เลือกทั้งหมด

    <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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน