ป้ายกำกับ: padding-top คือ

Lv.22 CSS Padding

Posted on by alsoon

CSS Padding เป็นการกำหนดระยะห่างภายในอิลิเมนต์กับเนื้อหาของอิลิเมนต์ โดยใช้ padding สามารถกำหนดได้ทั้ง 4 ด้านเลย บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Padding</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 {
				border: 1px solid red;
				padding: 200px; /* ทุกด้านขนาดกว้างเท่ากัน 200 พิกเซล */
			}
			
			p.p2 {
				border: 1px solid red;
				padding-top: 180px; /* ด้านบนขนาดกว้าง 180 พิกเซล */
			}
			
			p.p3 {
				border: 1px solid red;
				padding-left: 150px; /* ด้านซ้ายขนาดกว้าง 150 พิกเซล */
			}
			
			p.p4 {
				border: 1px solid red;
				padding-right: 100px; /* ด้านขวาขนาดกว้าง 100 พิกเซล */
			}
			
			p.p5 {
				border: 1px solid red;
				padding-bottom: 50px; /* ด้านล่างขนาดกว้าง 50 พิกเซล */
			}
			
			p.p6 {
				border: 1px solid red;
				padding: 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