مدل کاری (box model) در Css چیست؟

جالب است بدانید تمامی عناصر  HTML در CSS به صورت یک کادر)جعبه( چهار گوش تصور می شوند . این مفهوم در مبحث طراحی و طرح بندي (قالب) صفحات استفاده می شود. مدل کادري در اصل کادري است که در اطراف عناصر صفحه می تواند قرار بگیرد و شامل ویژگی هاي زیر باشد :

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

براي تنظیم عرض و ارتفاع حقیقی یک عنصر درك مفهوم مدل کادري بسیار مهم است.

♦ قواعد مربوطه به تنظیم ابعاد عنصر :

• height : این قاعده ارتفاع فضاي اشغال شده توسط تگ را مشخص می کند . این فاصله شامل فاصله محتویات درون تگ از حاشیه آن ، اندازه حاشیه هاي تگ و فاصله حاشیه هاي آن از تگ هاي اطراف نمی شود .
• min-height :  این قاعده ، حداقل ارتفاع فضاي اشغالی توسط تگ را تعیین می کند . ارتفاع یک تگ هیچ گاه کمتر از میزان تعیین شده از طریق قاعده min-height نمی شود. اما حداکثر ارتفاع می تواند بر اساس محتویات درون تگ متغیر باشد . ازاین قاعده معمولا براي مطمئن شدن از اینکه حداقل ارتفاع تگی حتی در صورت نداشتن محتویاتی از مقداري کمتر نشود استفاده می شود.
• max-height : این قاعده دقیقا بالعکس قاعده min-height رفتار می کند یعنی حداکثر ارتفاع فضاي اشغالی توسط تگ را تعیین می کند .
• width : این قاعده ، پهناي فضاي اشغال شده توسط تگ را مشخص می کند .
• min-width : این قاعده حداقل پهناي فضاي اشغال شده توسط تگ را تعیین می کند .
• max-width : این قاعده حداکثر پهناي فضاي اشغال شده توسط تگ را تعیین می کند .

♦ فاصله از اطراف :

• margin-top :  این قاعده میزان فاصله حاشیه بالاي تگ را از تگ پدرش یا تگی که در بالاي آن قرار دارد تعیین می کند .
• margin-right :  این قاعده میزان فاصله حاشیه سمت راست تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین می کند .
• margin-left :  این قاعده میزان فاصله حاشیه سمت چپ تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین میکند.
• margin-bottom:  این قاعده میزان فاصله حاشیه سمت پایین تگ را از تگ پدرش یا تگی که دربالاي آن قرار دارد تعیین میکند.
• margin : این قاعده ، میانبري براي چهار قاعده فوق می باشد . در واقع از این قاعده می توان براي تنظیم هر چهار قاعده فوق به یکباره استفاده کرد . به مثال زیر توجه کنید :

این دستور میزان فاصله هر یک از چهار طرف عکس هاي صفحه را به صورت جداگانه تعیین می کند . ما می توانیم به جاي این دستور از margin به صورت زیر استفاده کنیم :

به نحوه مقدار دهی به قاعده margin که در جهت عقربه هاي ساعت( یعنی ابتدا بالا ، راست ، پایین و چپ) است و بین هر مقدار فاصله اي وجود دارد دقت کنید .

♦ فاصله از داخل :

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding

این قواعد هم میزان فاصله محتویات داخل یک تگ (content) را از حاشیه هاي بالا ، راست ، پایین و چپ کنترل می کنند . padding میانبري براي هر ۴ قاعده است و نحوه مقدار دهی آن همانند قاعده margin خواهد بود .

موقعی که ما از قواعد width و height در CSS براي یک عنصر استفاده می کنیم در واقع فقط عرض و ارتفاع بخش content آن را تعیین کرده ایم . براي بدست آوردن عرض و ارتفاع حقیقی یک عنصر (یعنی آنچه در صفحه نمایش داده می شود) باید مقادیر تعیین شده براي قواعد border ، padding و margin را نیز به آن ها اضافه کنیم . به عنوان مثال قواعد زیر را که براي یک عنصر تعیین شده است در نظر بگیرید :

 عرض حقیقی این عنصر در صفحه 300 px  خواهد بود . براي بدست آوردن عرض حقیقی یک عنصر باید به صورت زیر عمل کنیم :

این موضوع براي ارتفاع یک عنصر نیز صادق است . ارتفاع حقیقی یک عنصر باید به صورت زیر محاسبه شود :

♦ حاشیه ها و Outline ها :

قواعد حاشیه ها ، اجازه کنترل حاشیه هاي تگ را می دهند . حاشیه تگ مکانی است میان padding و margin. به عبارتی دیگر مکانی بین محتویات داخل یک تگ و مرز آن ها با تگ هاي دیگر .

Outline ها به دور حاشیه ها کشیده می شوند و در حقیقت یک حاشیه دیگر را براي تگ بوجود می آورند . تفاوت Outline ها با حاشیه ها این است که Outline ها بر خلاف حاشیه ها ، فضایی که اشغال می کنند جزء فضاي تگ محسوب نمی شود و در صورتی که قسمتی از تگ مجاور با تگ جاري تلاقی داشته باشد بر روي تگ مجاور قرار می گیرد .

• : border-top-color این قاعده رنگ حاشیه بالاي تگ را تعیین می کند و یک رنگ را به عنوان مقدار می پذیرد . یکی از مقادیري که این قاعده می پذیرد ، کلمه کلیدي transparent است که در این حالت براي حاشیه تگ ، رنگی در نظر گرفته نمی شود اما همچنان فضایی را به میزانی که با قاعده border-width براي تگ تعیین شده است اشغال می کند .
• border-top-style : این قاعده طرح حاشیه بالاي تگ را تعیین می کند. میتوان به آن مقادیر dotted ،dashed، solid، double، groove، ridge،  inset و outset داد. به غیر از این مقادیر این خاصیت دو مقدار زیر را با کارکرد هاي متفاوت به عنوان مقدار می پذیرد:
• ​​​none : با این مقدار هیچ حاشیه اي براي تگ در نظر گرفته نمی شود . در این حالت مقدار قاعده border-width نیز برابر با صفر در نظر گرفته خواهد شد .
• hidden : این مقدار موجب می شود هیچ حاشیه اي براي تگ در نظر گرفته نشود . اما ضخامت border که در قاعده border-width تعیین شده است در نظر گرفته خواهد شد .

• border-top-width  : این قاعده ، اندازه پهناي حاشیه بالا را تعیین می کند و به دو شکل مقدار دهی می شود . یا با تعیین یکی از واحد هاي اندازه گیري همانند px,pt,em  و ... یا با قبول یکی از کلمات کلیدي thin , medium , thick.
• border-top : این قاعده ، میانبري براي سه قاعده پیشین است و می توان به یکباره آن ها را با این قاعده مشخص نمود .براي هر چهار طرف یک تگ ، هر چهار قاعده فوق تعریف شده است که به منظور جلوگیري از تکرار از توضیح آنها خودداري می کنیم .سینتکس کاربرد این قاعده به صورت زیر است :

• border-color : این قاعده میانبر ، رنگ حاشیه هر چهار سمت تگ را به یکباره تعیین می کند و همان مقادیر قاعده border-top-color را می پذیرد .
• border-style : این قاعده میانبر ، طرح حاشیه هر چهار سمت تگ را به یکباره کنترل می کند و همان مقادیر قاعده border-top-style را می پذیرد.
• border-width : این قاعده میانبر ، اندازه پهناي حاشیه هر چهار سمت تگ را به یکباره تعیین می کند و همان مقادیر قاعده border-top-width را می پذیرد.
• border : این قاعده میانبري براي هر سه قاعده border-width ، border-style و border-color است و با استفاده از آن می توان این سه قاعده را یکجا به چهار طرف عنصر اعمال نمود . نحوه استفاده از این قاعده به صورت زیر است :

قبل از وارد شدن به بحث Outline ها ذکر این نکته ضروري است که  Outline ها نمی توانند به حاشیه اي خاص اعمال شوند. Outline ی که تعریف می شود به حاشیه هاي هر چهار سمت تگ اعمال خواهد شد.

• outline-color : این قاعده ، رنگ Outline ي که به دور حاشیه کشیده می شود را تعیین می کند. 
• outline-style : این قاعده طرح Outline ي را که به دور حاشیه کشیده می شود تعیین می کند و همان مقادیر قاعده border-top-style را می پذیرد .
• outline-width : این قاعده اندازه پهناي Outline ي را که به دور حاشیه کشیده می شود تعیین می کند و همان مقادیر قاعده border-top-width را می پذیرد .
• outline : این قاعده میانبري براي سه قاعده فوق است و می بایست به صورت زیر مقدار دهی شود :