เกี่ยวกับการกำหนดพื้นที่ตัวเอง กำหนดพื้นที่ตัวเองจากขอบ จะมีพื้นที่ว่างจากขอบมาถึงตัวเอง เมื่อกำหนดค่าให้ วิธีการคล้ายๆ กับ Margins นะคะ วิธีการกำหนด
Padding สามารถระบุให้กับแต่ละด้านได้ด้วยเน้อ และกำหนดความกว้าง เป็น % , px , pt , cm , etc จะมีดังนี้
padding-top : กำหนดด้านบน
padding-right : กำหนดด้านขวา
padding-bottom : กำหนดด้านล่าง
padding-left : กำหนดด้านซ้ายลองนำมาเขียนกัน ตัวนี้จะระบุชื่อของแต่ละด้านลงไปด้วย
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding-top: 100px;
padding-right: 200px;
padding-bottom: 50px;
padding-left: 200px;
}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
padding-right: 200px;
padding-bottom: 50px;
padding-left: 200px;
Padding — Shorthand Property
วิธีนี้ เราจะกำหนดค่ารวมกันทั้ง 4 ด้านไปเลย [ padding: …. ….. ….. … ;] โดยที่ไม่ต้องระบุชื่อของแต่ละด้าน โดยจะรู้อัตโนมัติ ว่าการกำหนดค่าตัวแรกจะเป็นด้านบน ขวา ล่าง ซ้าย
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100pxลองนำมาเขียนกันดู ทุกด้านถูกกำหนดค่าไว้ จะมี Padding เท่ากับค่าที่ถูกกำหนด
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding:25px 50px 75px 100px; }
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
มาดูอีก!! วิธีหนึ่ง เราจะกำหนดค่า 3 ด้าน [ padding: ….. ….. ….. ;] โดยที่ไม่ต้องระบุชื่อของแต่ละด้าน และมีด้านหนึ่งที่ได้กำหนด แต่จะรู้โดยจะรู้อัตโนมัติ เมื่อกำหนดค่าให้กับอีกตัวหนึ่งฝั่งตรงข้าม
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75pxลองนำมาเขียนกันดู ด้านตรงข้ามที่ไม่ได้กำหนด จะมี Padding เท่ากันกับด้านที่ถูกกำหนดค่า
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding:25px 50px 75px;}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
มาดูอีก!! วิธีหนึ่ง เราจะกำหนดค่า 2 ด้าน [ padding: ….. ….. ;] โดยที่ไม่ต้องระบุชื่อของแต่ละด้าน จะรู้โดยจะรู้อัตโนมัติ เมื่อกำหนดค่าให้กับอีกตัวหนึ่งฝั่งตรงข้าม
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50pxลองนำวิธีนี้มาเขียนกันดู ด้านตรงข้ามของทุกด้านจะมี Padding เท่ากัน
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding:25px 50px;}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
มาดูอีก!! วิธีหนึ่ง ถ้าเรากำหนดค่าแค่ 1 ค่า [ padding: ….. ;] จะเป็นการกำหนดให้กับทุกด้านโดยที่ไม่ต้องระบุชื่อของแต่ละด้าน จะรู้โดยจะรู้อัตโนมัติ เมื่อกำหนดค่า
padding: 25px;
all four paddings are 25pxลองนำวิธีนี้มาเขียนกัน ทุกด้านจะมี Padding เท่ากันหมดทั้ง 4 ด้าน
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding:25px;}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
Padding and Element Width
padding กับ width ความกว้าง ทำงานกันอย่างไรมาดูกันนะคะ ความกว้างจะช่วยกำหนดขนาดกรอบให้กับข้อความ นั้นจะเป็นแบบไหน แค่ว่ากว้างเท่านั้น ความสูงจะปรับตามข้อความของเรา
<!doctype html>
<html>
<head>
<style>
div {
border: 5px solid black;
background-color: rgb(97, 199, 233);
padding:25px;
width: 500px;
}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<div>
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
</div>
</body>
</html>
width: 500px;
สำหรับ Padding ก็จะประมาณนี้ เอาไปลองปรับใช้กันดู วิธีการคล้ายกับ Margins ไม่ใช่ว่าเหมือนน่ะ คล้ายๆ 555+ ลองศึกษากันดูจาก w3schools เรื่อง CSS Padding บ๊ะบายยย ไว้มาต่อเรื่องถัดไป
