شما اینجا هستید

همه عناصر HTML را میتوان شبیه به یک جعبه (کادر) در نظر گرفت. هنگامی که در CSS در مورد طراحی و لایه بندی صحبت میکنیم واژه مدل جعبه ای را به کار میبریم.

مدل جعبه ای CSS در اصل یک کادر است که عناصر HTML را احاطه کرده و شامل margin, border, padding و محتوای عنصر است. مدل جعبه ای به ما این امکان را میدهد که دور عناصر حاشیه اضافه و بین آنها فاصله تعریف کنیم.

تصویر زیر مدل جعبه ای را به تصویر کشیده:

مدل جعبه ای

توضیح قسمت های مختلف :

  • Content : محتوای داخل کادر که متن و تصویر میباشد
  • Padding : ناحیه خالی دور محتوا است. مانند شکل بین محتوا و حاشیه قرار دارد. حاشیه داخلی (padding) دیده نمیشود.
  • Border : حاشیه ای است که دور paddingو محتوا کشیده میشود
  • Margin : ناحیه خالی خارجی که دور حاشیه است. حاشیه خارجی (margin) دیده نمیشود
<html>

<head>

<style>

div {

    background-color: lightgrey;

    width: 300px;

    padding: 25px;

    border: 25px solid navy;

    margin: 25px;

}

</style>

</head>

<body>


<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


</body>

</html>

 

پهنا و ارتفاع عنصر

 

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

هنگامی که ویژگی پهنا و ارتفاع یک عنصر را با CSS تنظیم میکنید، فقط ارتفاع و پهنای ناحیه محتوا را تنظیم میکنید. در صورتیکه برا ی محاسبه اندازه کامل یک عنصر، باید padding, border و margin را نیز اضافه کنید.

کل پهنای عنصر <div> در مثال پایین 350px میشود:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

 

حالا حساب میکنیم :

 

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

پهنای کل یک عنصر شبیه به این نمونه محاسبه میشود:

پهنای کل عنصر = پهنا + حاشیه داخلی چپ + حاشیه داخلی راست + حاشیه چپ + حاشیه راست + حاشیه خارجی چپ + حاشیه خارجی راست

ارتفاع کل یک عنصر شبیه به این نمونه محاسبه میشود:

ارتفاع کل عنصر = ارتفاع + حاشیه داخلی بالا + حاشیه داخلی پایین + حاشیه بالا + حاشیه پایین + حاشیه خارجی بالا + حاشیه خارجی پایین

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.