مرجع طراحی سایت حرفه ای

خواص margin و کاربردهای آن در طراحی سایت
کلیه عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای تشکیل داد ساختار مناسب در طراحی یک وبسایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مضمون‌ Box Model در CSS به بررسی خصوصیات و بضاعت و توان های این اجزاء ( Box ) میپردازد.

مفهوم یک Box در CSS علامت دهنده دور و اطراف گوشه و کنار یک عنصر HTML می‌باشد که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content هست.

معنی Box Model این بضاعت و توان را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را انتخاب کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را انتخاب کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر گزینش کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیق تر ادراک فرمائید.

هم اکنون میخواهیم در این نوشته‌ی‌علمی شروع به سراغ خواص margin در طراحی صفحه ها و استایل نویسی CSS استعمال کنیم.

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

مطالب مرتبط

ترفندهای CSS که احتمالا تابحال با آنان فعالیت نکرده اید

معرفی چند ترفند CSS اثر گذار و کاربردی که به کارتان می آید
فضای خالی در سوا گوشه و کنار Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء انتخاب نمود.

این دور و اطراف دارای رنگ پس زمینه نیست وبه صورت یک فضا با بگراند پر‌نور یا Transparent در فضای اطراف Box قرار میگیرد.

مثال ۱ :

div {
margin:10px;
}
مثال ۲ :

div {
margin-left:10px;
margin-top:10px;
margin-right:5px;
margin-bottom:3px;
}
نحوه به حساب آوردن اندازه یک Box
برای طراحی و چینش دقیق اجزاء در طراحی یک ورقه وب ، کلیه اجزاء جزء به جزء با دقت ۱px محاسب میگردند و با توجه بدین گزینه نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم می‌باشد.

با به کارگیری از خصوصیات width , height اندازه اجزاء ( Box ) تعیین می‌شوند ، اما به این نکته اعتنا کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که بوسیله خصوصیات Width و height تعیین شده است متفاوت خواهد بود.

در واقع با به کارگیری از width و height صرفا اندازه محتوا ( Content ) تعیین شده می باشد و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند.

نکته : این نکته حائض اهمیت را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با به کارگیری از فرمول زیر محاسبه می گردد.

width = width + left padding + right padding + left border + right border
+ left margin + right margin

height = height + top padding + bottom padding + top border + bottom border
+ top margin + bottom margin
مقادیر مربوط به اندازه گوشه را می توان به چندین صورت ذیل انتخاب کرد، اما مناسب ترین و مرسوم ترین روش در شرایط معمول، تعیین مقادیر به پیکسل (px) می‌باشد. راجع‌به مقادیر خواص margin هم می اقتدار از روش های مقدار دهی زیر بهره مند شد.

۱- تعیین مقادیر به پیکسل (picture element) : به فرض ۴px، ۰px و… (پیکسل ها مقادیری ثابت می باشند)، از واحد px بیشتر برای نمایش محتوا در ورقه نمایش (مانیتور) استفاده می گردد.

۲- انتخاب مقادیر به Points : به فرض ۲pt، ۶pt و… (هر pt برابر ۱/۷۲ اینچ هست)، از واحد pt بیشتر برای کارهای چاپی استفاده می‌گردد.

۳- تعیین مقادیر به Ems : به فرض ۱em، ۰٫۵em و… (هر em برابر با ۱۶ پیکسل و ۱۲ pt می‌باشد)، به دلیل امکان غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای تلفن همراه های تلفن همراه و دستگاه های مانند آن مناسب می باشد.

۴- گزینش مقادیر به سانتی متر (CentiMeter) : به فرض ۵cm ، ۱۰cm و…، استعمال از این شیوه در وب، چندان مرسوم نیست.

۵- انتخاب مقادیر به درصد (Percent) : به فرض %۱۰ ، %۵۰ و…، درین‌وضعیت‌ اندازه بلاک با تمرکز به اندازه شیت نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحه ها وب برای موبایل های گوشی و دستگاه های مانند آن مناسب هست.

۶- انتخاب مقادیر به صورت اتومات (auto) و موقعیت وراثتی (inherit) از بلاک والد.

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

خواص margin و کاربردهای آن در طراحی سایت
کلیه عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای تشکیل داد ساختار مناسب در طراحی یک وبسایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مضمون‌ Box Model در CSS به بررسی خصوصیات و بضاعت و توان های این اجزاء ( Box ) میپردازد.

مفهوم یک Box در CSS علامت دهنده دور و اطراف گوشه و کنار یک عنصر HTML می‌باشد که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content هست.

معنی Box Model این بضاعت و توان را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را انتخاب کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را انتخاب کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر گزینش کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیق تر ادراک فرمائید.

هم اکنون میخواهیم در این نوشته‌ی‌علمی شروع به سراغ خواص margin در طراحی صفحه ها و استایل نویسی CSS استعمال کنیم.

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

مطالب مرتبط

ترفندهای CSS که احتمالا تابحال با آنان فعالیت نکرده اید

معرفی چند ترفند CSS اثر گذار و کاربردی که به کارتان می آید
فضای خالی در سوا گوشه و کنار Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء انتخاب نمود.

این دور و اطراف دارای رنگ پس زمینه نیست وبه صورت یک فضا با بگراند پر‌نور یا Transparent در فضای اطراف Box قرار میگیرد.

مثال ۱ :

div {
margin:10px;
}
مثال ۲ :

div {
margin-left:10px;
margin-top:10px;
margin-right:5px;
margin-bottom:3px;
}
نحوه به حساب آوردن اندازه یک Box
برای طراحی و چینش دقیق اجزاء در طراحی یک ورقه وب ، کلیه اجزاء جزء به جزء با دقت ۱px محاسب میگردند و با توجه بدین گزینه نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم می‌باشد.

با به کارگیری از خصوصیات width , height اندازه اجزاء ( Box ) تعیین می‌شوند ، اما به این نکته اعتنا کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که بوسیله خصوصیات Width و height تعیین شده است متفاوت خواهد بود.

در واقع با به کارگیری از width و height صرفا اندازه محتوا ( Content ) تعیین شده می باشد و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند.

نکته : این نکته حائض اهمیت را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با به کارگیری از فرمول زیر محاسبه می گردد.

width = width + left padding + right padding + left border + right border
+ left margin + right margin

height = height + top padding + bottom padding + top border + bottom border
+ top margin + bottom margin
مقادیر مربوط به اندازه گوشه را می توان به چندین صورت ذیل انتخاب کرد، اما مناسب ترین و مرسوم ترین روش در شرایط معمول، تعیین مقادیر به پیکسل (px) می‌باشد. راجع‌به مقادیر خواص margin هم می اقتدار از روش های مقدار دهی زیر بهره مند شد.

۱- تعیین مقادیر به پیکسل (picture element) : به فرض ۴px، ۰px و… (پیکسل ها مقادیری ثابت می باشند)، از واحد px بیشتر برای نمایش محتوا در ورقه نمایش (مانیتور) استفاده می گردد.

۲- انتخاب مقادیر به Points : به فرض ۲pt، ۶pt و… (هر pt برابر ۱/۷۲ اینچ هست)، از واحد pt بیشتر برای کارهای چاپی استفاده می‌گردد.

۳- تعیین مقادیر به Ems : به فرض ۱em، ۰٫۵em و… (هر em برابر با ۱۶ پیکسل و ۱۲ pt می‌باشد)، به دلیل امکان غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای تلفن همراه های تلفن همراه و دستگاه های مانند آن مناسب می باشد.

۴- گزینش مقادیر به سانتی متر (CentiMeter) : به فرض ۵cm ، ۱۰cm و…، استعمال از این شیوه در وب، چندان مرسوم نیست.

۵- انتخاب مقادیر به درصد (Percent) : به فرض %۱۰ ، %۵۰ و…، درین‌وضعیت‌ اندازه بلاک با تمرکز به اندازه شیت نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحه ها وب برای موبایل های گوشی و دستگاه های مانند آن مناسب هست.

۶- انتخاب مقادیر به صورت اتومات (auto) و موقعیت وراثتی (inherit) از بلاک والد.

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