آموزش padding در css

در این بخش از آموزش css به یکی از دستورات مهم و کاربردی بنام دستور padding می پردازیم.دستور padding یک فاصله داخلی خالی بین محتوا و لبه عنصر ایجاد می کند.مثلا متنی را در یک div قرار می دهید و می بینید متن به border چسبیده است و ظاهر مناسبی ندارد.

با دستور padding می توانیم یک فاصله داخلی ایجاد نماییم.

دستور  margin فاصله دو عنصر را در صفحات وب تعیین می کند، اما دستور padding در css فاصله داخلی عنصر با محتوا را مشخص می کند. به عنوان مثال اگر بخواهیم محتوا از کادر 5 پیکسل فاصله داشته باشند باید از دستور  padding استفاده کنیم.به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>

دستور padding در css دارای حالات مختلف است. می توانیم برای هر قسمت یک مقدار تعیین کنیم مثلا برای بالا یک مقدار – پایین یک مقدار – راست و چپ هم یک مقدار مشخص.

در مثال پایین برای هر حالت دستور padding مقداری مشخص می کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>sh711.com</h2>
<div>padding site sh711.com</div>
</body>
</html>

 

تفاوت padding , margin :

بسیاری از افراد تفاوت padding , margin را نمی دانند:

margin یک فاصله بیرونی ایجاد می کند ولی padding یک فاصله درونی ایجاد می کند.

حال یک padding به div می دهم. نتیجه را ببینید.

<!DOCTYPE html>
<html>
<head>
<title>sh711.com</title>
</head>
<body>
<div style="border: 1px solid blue;padding: 20px">
The CSS padding properties are used to generate space around content.The padding properties set the size of the white space between the element content and the element border.This element has a padding of 50px.
</div>
</body>
</html>

 

حالت خلاصه دستور padding در css :

دستور padding در css به حالت های مختلف نوشته می شود می توانیم برای هر قسمت یک خط کد بنویسیم یا اینکه دستور padding را بصورت خلاصه بنویسیم.

در دستور خلاصه فاصله داخلی را در یک خط می نویسیم.

در مثال زیر حالت خلاصه دستور padding را می بینیم.

div {
padding: 15px 20px 35px 40px;
}

 

یکی دیگراز روش ها نوشتن دستور padding بصورت خلاصه تر است. در مثال پایین padding یا فاصله داخلی برای بالا و پایین 20 پیکسل و برای چپ و راست 40 پیکسل در نظر گرفته ایم.

div {
padding: 20px 40px;
}

 

اعمال padding به همه قسمت ها :

برای اعمال padding به همه قسمت ها می توانیم یک اندازه را برای همه قسمت ها در نظر بگیریم. در مثال زیر به همه قسمت ها مقدار 30 پیسکل داده ایم. یعنی فاصله محتوا تا کادر 30 پیکسل میباشد.

div {
padding: 30px;
}

اضافه شدن padding به عرض باکس :

وقتی که به یک باکس padding اضافه می شود عرض صفحه بیشتر می شود. در مثال زیر عرض باکس که به آن padding داده شده است بیشتر است.

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>sh711.com</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
ثبت نظر