آموزش دستور margin در css

دستور margin یکی از دستورات مهم و پرکاربرد css می باشد. پس سعی نمایید آن را خوب یاد بگیرید.

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

این دستور هم می تواند بصورت تکی و هم بصورت ترکیبی استفاده شود.

با ذکر چند مثال توضیح می دهم.

مثال اول:

با گذاشتن سیمیکولن می توانیم چندین ویژگی را به یک عنصر بدهیم.

من با استفاده از margin-top یک فاصله 20 پیکسلی با عنصر بالایی ایجاد کردم.

برای فهم بهتر اول کد را بدون دستور margin استفاده نمایید.

بعضی مواقع دو عنصر بهم می چسبند که ظاهر جالبی ندارد ما با استفاده از margin می توانیم فاصله ای بین دو عنصر بیاندازیم.

یک نکته مهم : بعضی مواقع ، بعضی ویژگی ها بصورت کامل روی تمام عناصر جواب نمی دهند.

نکته مهم دیگر:

مثلا شما عرض صفحه را 970 پیکسل می گیرید و دو div را یکی با عرض 600 و دیگری را 370 می گیرید. سپس برای جدا کردن دو عنصر یک margin با اندازه 20 پیکسل می دهید و می بینید یکی از عناصر به زیر عنصر بعدی رفت. تعجب می کنید.

نکته اینجاست که اندازه margin به عرض صفحه اضافه می شود و جمع آنها می شود 990 و به همین خاطر یکی از عناصر به پایین هدایت می شود.

پس حتما این نکته را در اندازه گیری ها لحاظ نمایید.

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

عناصر از همه طرف 30 پیکسل فضای خالی دارند. فاصله عناصر از هم 30 پیکسل می باشد.

<!DOCTYPE html>
<html>
<head>
<title>sh711.com</title>
</head>
<body>
<div>aaaaaaaaa</div>
<div style="color:red;margin-top: 20px">bbbbbbbbbb</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>sh711.com</title>
<style>
.sp{
border: 1px solid red;
margin: 30px;
}
</style>
</head>
<body>
<div style="border: 1px solid blue">
<div class="sp">ali</div>
<div class="sp">reza</div>
<div class="sp">ahmad</div>
</div>
</body>
</html>

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

تگ ها : کد css
عضویت طلایی
ثبت نظر