دستور padding و margin و تفاوت آنها
آموزش ویدئویی دستور padding و margin
در این فیلم و آموزش ویدئویی با دستور padding وmargin همراه با مثال آشنا می شوید و تفاوت آنها را می فهمید.
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالاآموزش دستور padding و margin و تفاوت آنها همراه با مثال و توضیح کامل. این دو دستور بصورت یکجا یا جداگانه استفاده می شود که به توضیح کامل آنها خواهیم پرداخت و با ذکر مثال آنها را توضیح خواهیم داد.
کدهای زیر را در یک فایل با پسوند html ذخیره نمایید و اجرا کنید.
دستور padding در css
در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور padding می رویم.
دستور padding در css برای ایجاد فاصله های داخلی استفاده می شود.
در مثال زیر یک باکس را ایجاد کرده ایم آن را در یک فایل html قرار داده و اجرا نمایید و نتیجه را ببینید.
حال دستور padding آن را حذف کنید و صفحه را ذخیره و اجرا کنید.
می بینید که متن به کادر چسبیده است و چهره جالبی ندارد.
برای اینکه متن از سمت چپ و اطراف فاصله بگیرد از متد یا دستور padding استفاده می کنیم.
<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 استفاده کنیم.
کد زیر را در مثال بالا قرار داده و تست نمایید مشاهده میک نید که فقط از سمت چپ فاصله ایجاد شد.
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding-left: 30px;
}
</style>
دستور padding-right
دستور padding-right برای ایجاد فاصله داخلی از راست استفاده می شود.
در مثال زیر نحوه استفاده از دستور padding-right را مشاهده می کنید.
زمانی که padding به باکس اضافه می شود سایز باکس نیز بزرگتر می شود.
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
padding-right: 30px;
}
</style>
دستورات padding-bottom و padding-top
دستورات padding-bottom و padding-top برای ایجاد فاصله داخلی از پایین و بالا بکار می روند.
در مثال زیر نحوه استفاده از آنها را می بینید.
در طراحی قالب سایت از padding استفاده زیادی می شود.
.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 استفاده کنید.
در مثال زیر از چهار طرف بالا ، پایین ، راست و چپ فاصله ده پیکسلی انداخته شد.
اگر بخواهیم فقط از یک طرف فاصله ایجاد کنیم می توانیم دستورات را بصورت جداگانه استفاده کنیم.
<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 برای ایجاد فاصله بیرونی از طرف پایین استفاده می شود.
کد زیر را با مثال بالا تغییر دهید. می بینید که دو باکس از طرف پایین از هم جدا شدند.
.topsite98{
width: 250px;
height: 120px;
background-color: orange;
margin-bottom: 10px;
}
</style>
دستور margin-top
از دستور margin-top برای ایجاد فاصله بیرونی از بالا استفاده میشود.
در مثال زیر با نحوه کار دستور margin-top آشنا می شوید.
ما دو باکس ایجاد کرده ایم و به باکس پایین دستور margin-top اضافه کرده ایم.
مشاهده می کنید که دو div از هم جدا شده اند و بین آنها فاصله ای افتاده است.
<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 به تنهایی یا بصورت جداگانه استفاده شود.
<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
تگ: حاشیه
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید