Page 1 of 1

TIP : การใช้ margin css

Posted: 23/11/2015 11:23 am
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 582 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 582 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 582 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 582 times

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

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