โดย Parichat » 28/06/2018 5:33 pm
การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่
ในกรณีที่เราต้องการที่จะจัดรูปหรือข้อความที่อยู่มีแท็ก <div> คลอบอยู่นั้นเราไม่สามารถที่จะใช้คำว่า center ให้มันอยู่กึ่งกลางได้แต่ใน
css ช่วยให้เราสามารถที่จะจัดรูปหรือข้อความที่มีแท็ก <div> คลอบอยู่ได้โดยใช้คำสั่ง margins ในการจัดได้
ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน
รูปภาพตัวอย่างที่ต้องการจัด
- p3.jpg (37.2 KiB) Viewed 1032 times
โค้ด
โค้ด: เลือกทั้งหมด
<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 คลาส ดังโค้ด
2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น
โค้ด: เลือกทั้งหมด
.margintest{
margin-left: 100px;
margin-top: 100px;
}
คำอธิบายโค้ด
- margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
margin-top คือการจัดให้ด้านบนห่างจากจอ 100px
3.จากนั้นนำชื่อ class ไปใส่ใน class ของแท็ก <div> ดังโค้ด
โค้ด: เลือกทั้งหมด
<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 (14.33 KiB) Viewed 1032 times
นอกจากนี้ก็ยังมีอีกไม่ว่าจะจัดฝั่งขวาให้ห่างจากจอก็ทำได้โดยใช้คำสั่ง margin-right และยังสามารถกำหนดให้ห่างจากขอบจอด้านล่างก็ได้โดยใช้คำสั่ง margin-bottom คำสั่งนี้เหมาะในการใช้จัดข้อมูลที่มีแท็ก <div>คล่อมอยู่
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css
[b][size=150][color=#FF4080]การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่[/color][/size][/b]
ในกรณีที่เราต้องการที่จะจัดรูปหรือข้อความที่อยู่มีแท็ก <div> คลอบอยู่นั้นเราไม่สามารถที่จะใช้คำว่า center ให้มันอยู่กึ่งกลางได้แต่ใน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/2656-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%A7%E0%B8%81%E0%B8%B1%E0%B8%9A-css3.html]css[/url] ช่วยให้เราสามารถที่จะจัดรูปหรือข้อความที่มีแท็ก <div> คลอบอยู่ได้โดยใช้คำสั่ง margins ในการจัดได้
[b][color=#FF0040]ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน[/color][/b]
[b]รูปภาพตัวอย่างที่ต้องการจัด[/b]
[attachment=1]p3.jpg[/attachment]
โค้ด
[code]
<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>
[/code]
[b][color=#FF00BF]ขั้นตอนการจัดรูปภาพ[/color][/b]
[list]1.เข้าไปในไฟล์ css แล้วสร้าง class มา 1 คลาส ดังโค้ด
[code]
.margintest{
......คำสั่ง css......
}
[/code]
2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น
[code]
.margintest{
margin-left: 100px;
margin-top: 100px;
}
[/code]
[b]คำอธิบายโค้ด[/b]
[list]margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
margin-top คือการจัดให้ด้านบนห่างจากจอ 100px[/list]
3.จากนั้นนำชื่อ class ไปใส่ใน class ของแท็ก <div> ดังโค้ด
[code]<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>[/code]
4.ผลลัพธ์ที่ได้ดังรูป
[attachment=0]p4.jpeg[/attachment][/list]
นอกจากนี้ก็ยังมีอีกไม่ว่าจะจัดฝั่งขวาให้ห่างจากจอก็ทำได้โดยใช้คำสั่ง margin-right และยังสามารถกำหนดให้ห่างจากขอบจอด้านล่างก็ได้โดยใช้คำสั่ง margin-bottom คำสั่งนี้เหมาะในการใช้จัดข้อมูลที่มีแท็ก <div>คล่อมอยู่
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css[/b]
[list]-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/vdo-tutorial-css3.html]VDO สอนเขียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบเกี่ยวกับ HTML css[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]ถามตอบเกี่ยวกับ PHP[/url][/list]