طراحی سایت

آشنایی با خاصیت 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 و یا این که به طور تکی برای هرکدام از جهات ۴ گانه عنصر گزینش کرد.