การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

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

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

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

การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

Post by Parichat » 28/06/2018 5:33 pm

การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

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

ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน
รูปภาพตัวอย่างที่ต้องการจัด
p3.jpg
p3.jpg (37.2 KiB) Viewed 629 times
โค้ด

Code: Select all

<html>
        <head>
                <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
                <div class="container-fluid">
                        <div class="row">
                                        <div class="col-lg-12">
                                                <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" />
                                        </div>
                        </div>
                </div>
        </body>
</html>
ขั้นตอนการจัดรูปภาพ
  • 1.เข้าไปในไฟล์ css แล้วสร้าง class มา 1 คลาส ดังโค้ด

    Code: Select all

    .margintest{
    	......คำสั่ง css......
    }
    
    2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น

    Code: Select all

    .margintest{
    	margin-left: 100px;
    	margin-top: 100px;
    }
    
    คำอธิบายโค้ด
    • margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
      margin-top คือการจัดให้ด้านบนห่างจากจอ 100px
    3.จากนั้นนำชื่อ class ไปใส่ใน class ของแท็ก <div> ดังโค้ด

    Code: Select all

    <html>
            <head>
                    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
            </head>
            <body>
                    <div class="container-fluid">
                            <div class="row margintest">
                                            <div class="col-lg-12">
                                                    <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" />
                                            </div>
                            </div>
                    </div>
            </body>
    </html>
    4.ผลลัพธ์ที่ได้ดังรูป
    p4.jpeg
    p4.jpeg (14.33 KiB) Viewed 629 times
นอกจากนี้ก็ยังมีอีกไม่ว่าจะจัดฝั่งขวาให้ห่างจากจอก็ทำได้โดยใช้คำสั่ง margin-right และยังสามารถกำหนดให้ห่างจากขอบจอด้านล่างก็ได้โดยใช้คำสั่ง margin-bottom คำสั่งนี้เหมาะในการใช้จัดข้อมูลที่มีแท็ก <div>คล่อมอยู่

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

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 13 guests