Css

|

اموزش padding margin

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

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

حال به توضیح جز به جز هر کدام میپردازیم:

margin-left

این مشخصه فاصله اجزای صفحه با حاشیه سمت چپ را اندازه میگیرد ( فاصله پنجره با دیوار سمت چپ)

<div style="margin-left:200px; border:double">این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.</div>

margin-right

این مشخصه فاصله اجزای صفحه با حاشیه سمت راست را اندازه میگیرد ( فاصله پنجره با دیوار سمت راست)

<div style="margin-right:200px; border:double">این DIV دویست پیکسل از سمت راست صفحه فاصله دارد.</div>

margin-top

این مشخصه فاصله اجزای صفحه با حاشیه سمت بالا را اندازه میگیرد ( فاصله پنجره با دیوار سمت بالا)

<div style="margin-top:100px; border:double">این DIV صد پیکسل از بالای صفحه فاصله دارد.</div>

margin-bottom

این مشخصه فاصله اجزای صفحه با حاشیه سمت پایین را اندازه میگیرد ( فاصله پنجره با دیوار سمت پایین)

<div style="margin-bottom:100px; border:double">این DIV صد پیکسل از پایین صفحه فاصله دارد.</div>

padding-right

این مشخصه فاصله اجزای داخلی یک جز صفحه با حاشیه درونی از سمت راست را اندازه میگیرد ( فاصله دستگیره با راست)

<div style="padding-right:100px; border-style:double">برای این DIV معادل 100 پیکسل padding تعریف شده است.</div>

padding-top

این مشخصه فاصله اجزای داخلی یک جز صفحه با حاشیه درونی از سمت بالا را اندازه میگیرد (فاصله دستگیره با بالا)

<div style="padding-top:30px; border-style:double">برای این DIV معادل 30 پیکسل padding تعریف شده است.</div>

padding-left

این مشخصه فاصله اجزای داخلی یک جز صفحه با حاشیه درونی از سمت چپ را اندازه میگیرد (فاصله دستگیره با چپ)

<div style="padding-right:100px; border-style:double">برای این DIV معادل 100 پیکسل padding تعریف شده است.</div>

padding-bottom

این مشخصه فاصله اجزای داخلی یک جز صفحه با حاشیه درونی از سمت پایین را اندازه میگیرد (فاصله دستگیره با پایین)

<div style="padding-top:30px; border-style:double">برای این DIV معادل 30 پیکسل padding تعریف شده است.</div>

نکته: اگر padding و margin را بدون right, left, top یا bottom به کار ببریم هر اندازه ای که بدهیم برای هر چهار جهت اعمال میشود.

css طراحی سایت اموزش css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید