TIP : การใช้ margin css

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

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

M031
PHP Hero Member
PHP Hero Member
Posts: 156
Joined: 20/11/2015 9:05 am

TIP : การใช้ margin css

Post by M031 »

Margin คือ การกำหนดระยะห่างจากจุดเดิม ไปอีกจุดหนึ่งซึ่งประกอบด้วย

1.margin-top คือการที่จะยึดด้านบนเป็นหลัก แล้วทำการผลักออกไป

Code: Select all

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr>
	<h3 style="margin-top:135px">Test Test2</h3>
	<h3 >TTTTT</h3>
</body>
</html>
test.PNG
test.PNG (9.97 KiB) Viewed 577 times
2.margin-left คือการที่จะยึดด้านซ้ายเป็นหลัก แล้วทำการผลักออกไป

Code: Select all

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr>
	<h3 style="margin-left:135px">Test Test2</h3>
	<h3 >TTTTT</h3>
</body>
</html>
test.PNG
test.PNG (9.65 KiB) Viewed 577 times
3.margin-right คือการที่จะยึดด้านขวาเป็นหลัก แล้วทำการผลักออกไป

Code: Select all

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr>
	<h3 style="text-align: center; margin-right:700px">Test Test2</h3>
	<h3 style="text-align: center;">TTTTT</h3>
</body>
</html>
test.PNG
test.PNG (11.01 KiB) Viewed 577 times
4.margin-bottom คือการที่จะยึดด้านล่างเป็นหลัก แล้วทำการผลักออกไป

Code: Select all

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr>
	<h3 style="margin-bottom: 109px;">Test Test2</h3>
	<h3>TTTTT</h3>
</body>
</html>
test.PNG
test.PNG (9.88 KiB) Viewed 577 times

สามารถศึกษาเพิ่มเติมได้ที่
http://www.techonthenet.com/css/properties/margin.php

ลิ้งที่เกี่ยวข้อง
https://www.mindphp.com/%E0%B8%9A%E0%B8% ... 9-css.html

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 9 guests