ป้ายกำกับ: Right margin คือ

Lv.21 CSS Margin

Posted on by alsoon

CSS Margin เป็นการกำหนดระยะห่างระหว่างอิลิเมนต์ โดยค่าที่สามารถกำหนดได้เรียงจาก บน ขวา ล่าง ซ้าย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Margin</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.p1 {
				background-color: red;
				margin: 200px; /* ทุกด้านขนาดกว้างเท่ากัน 200 พิกเซล */
			}
			
			p.p2 {
				background-color: Orange;
				margin-top: 180px; /* ด้านบนขนาดกว้าง 180 พิกเซล */
			}
			
			p.p3 {
				background-color: green;
				margin-left: 150px; /* ด้านซ้ายขนาดกว้าง 150 พิกเซล */
			}
			
			p.p4 {
				background-color: Violet;
				margin-right: 100px; /* ด้านขวาขนาดกว้าง 100 พิกเซล */
			}
			
			p.p5 {
				background-color: Tomato;
				margin-bottom: 50px; /* ด้านล่างขนาดกว้าง 50 พิกเซล */
			}
			
			p.p6 {
				background-color: MediumSeaGreen;
				margin: 10px 20px 30px 40px; /* กำหนดบรรทัดเดียว 4 ด้านเลย ตามลำดับ บน ขวา ล่าง ซ้าย */
			}
		</style>
	</head>
	<body>

		<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
		
		<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
		
		<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>
		
		<p class="p4">ไม่รู้จะเขียนอะไรดี P4</p>
		
		<p class="p5">ไม่รู้จะเขียนอะไรดี P5</p>
		
		<p class="p6">ไม่รู้จะเขียนอะไรดี P6</p>

	</body>
</html>
Top