آموزش مدل جعبه CSS

تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت.

مدل جعبه CSS

در CSS ، هنگام صحبت در مورد طراحی و طرح ، از اصطلاح “مدل جعبه” استفاده می شود.

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

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

• محتوا – محتوای کادر ، جایی که متن و تصاویر در آن ظاهر می شود
• Padding – منطقه اطراف محتوا را پاک می کند. بالشتک شفاف است
• مرز – مرز A که در اطراف لایه و محتوای می رود
• حاشیه – منطقه ای را در خارج از مرز پاک می کند. حاشیه شفاف است

مدل جعبه به ما اجازه می دهد تا یک حاشیه در اطراف عناصر اضافه کنیم ، و فضای بین عناصر را تعریف کنیم. 

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

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