دسته : آموزش CSS

دستور padding و margin و تفاوت آنها

آموزش دستور padding و margin و تفاوت آنها همراه با مثال و توضیح کامل. این دو دستور بصورت یکجا یا جداگانه استفاده می شود که به توضیح کامل آنها خواهیم پرداخت و با ذکر مثال آنها را توضیح خواهیم داد.

کدهای زیر را در یک فایل با پسوند html ذخیره نمایید و اجرا کنید.

دستور padding در css

در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور padding می رویم.

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

در مثال زیر یک باکس را ایجاد کرده ایم آن را در یک فایل html قرار داده و اجرا نمایید و نتیجه را ببینید.

حال دستور padding آن را حذف کنید و صفحه را ذخیره و اجرا کنید.

می بینید که متن به کادر چسبیده است و چهره جالبی ندارد.

برای اینکه متن از سمت چپ و اطراف فاصله بگیرد از متد یا دستور padding استفاده می کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding: 30px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="topsite98">
<p>topsite98</p>
</div>
</body>
</html>

دستور padding-left

دستور padding-left برای ایجاد فاصله داخلی از سمت چپ کادر استفاده می شود.

گاهی نیاز داریم که فقط از سمت چپ فاصله ایجاد کنیم برای این کار می توانیم از دستور padding-left استفاده کنیم.

کد زیر را در مثال بالا قرار داده و تست نمایید مشاهده میک نید که فقط از سمت چپ فاصله ایجاد شد.

<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding-left: 30px;
}
</style>

دستور padding-right

دستور padding-right برای ایجاد فاصله داخلی از راست استفاده می شود.

در مثال زیر نحوه استفاده از دستور padding-right را مشاهده می کنید.

زمانی که padding به باکس اضافه می شود سایز باکس نیز بزرگتر می شود.

<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding-right: 30px;
}
</style>

دستورات padding-bottom و padding-top

دستورات padding-bottom و padding-top برای ایجاد فاصله داخلی از پایین و بالا بکار می روند.

در مثال زیر نحوه استفاده از آنها را می بینید.

در طراحی قالب سایت از padding استفاده زیادی می شود.

<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding-top: 30px;
padding-bottom: 30px;
}
</style>

دستور margin در css

دستور margin در css برای ایجاد فاصله بیرونی استفاده می شود.

در طراحی سایت از دستور margin به دفعات استفاده می شود و یکی از دستورات مه css میباشد.

در این آموزش با نحوه کار دستور یا ویژگی margin آشنا می شوید.

در مثال زیر با نحوه کار این دستور آشنا می شوید. در مثال زیر دو باکس را ایجاد کرده ایم و نام کلاس آن را topsite98 گذاشته ایم.

اگر دستور margin را حذف کنید می بینید که دو باکس بهم می چسبند.

برای جدا کردن آنها می توانید از margin استفاده کنید.

در مثال زیر از چهار طرف بالا ، پایین ، راست و چپ فاصله ده پیکسلی انداخته شد.

اگر بخواهیم فقط از یک طرف فاصله ایجاد کنیم می توانیم دستورات را بصورت جداگانه استفاده کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
margin: 10px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="topsite98">
<p>topsite98</p>
<p>div 1</p>
</div>
<div class="topsite98">
<p>topsite98</p>
<p>div 2</p>
</div>
</body>
</html>

دستور margin-bottom

دستور margin-bottom برای ایجاد فاصله بیرونی از طرف پایین استفاده می شود.

کد زیر را با مثال بالا تغییر دهید. می بینید که دو باکس از طرف پایین از هم جدا شدند.

<style>
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
margin-bottom: 10px;
}
</style>

دستور margin-top

از دستور margin-top برای ایجاد فاصله بیرونی از بالا استفاده میشود.

در مثال زیر با نحوه کار دستور margin-top آشنا می شوید.

ما دو باکس ایجاد کرده ایم و به باکس پایین دستور margin-top اضافه کرده ایم.

مشاهده می کنید که دو div از هم جدا شده اند و بین آنها فاصله ای افتاده است.

<!DOCTYPE html>
<html>
<head>
<style>
.t1{
width: 250px;
height: 120px;
background-color: orange;
}
.t2{
width: 250px;
height: 120px;
background-color: orangered;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="t1">
<p>topsite98</p>
<p>div 1</p>
</div>
<div class="t2">
<p>topsite98</p>
<p>div 2</p>
</div>
</body>
</html>

دستور margin-left و margin-right

دستور margin-left و margin-right برای ایجاد فاصله بیرونی از سمت چپ و راست استفاده می شوند.

در هر جا نیاز باشد می توانیم از margin به تنهایی یا بصورت جداگانه استفاده شود.

<!DOCTYPE html>
<html>
<head>
<style>
.t1{
width: 250px;
height: 120px;
background-color: orange;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="t1">
<p>topsite98</p>
<p>div 1</p>
</div>
<div class="t1">
<p>topsite98</p>
<p>div 2</p>
</div>
</body>
</html>

تفاوت margin و padding در css

تفاوت margin و padding در css در این است که از padding برای ایجاد فضای خالی داخل باکس استفاده می شود ولی از margin برای فاصله بیرونی و فاصله انداختن بین عناصر استفاده می شود.

در مثال های بالا با نحوه کار این دو دستور آشنا شدید.

امیدواریم این آموزش برای شما موثر باشد.

یا حق

منبع : تاپ سایت 98 نویسنده : هدایت عباسی تاریخ : 2019-04-06 17:30:57 تگ :
تاپ سایت 98 تاپ سایت 98 تاپ سایت 98