📦 CSS Box Model Simulator

Learn how CSS box model properties affect element layout

🎯 How to Use This Simulator

Remember: Inline styles go directly in your HTML using the style attribute!

🎛️ Box Model Controls

📏 Calculated Dimensions

Content: 120 × 80px
+ Padding: 160 × 120px
+ Border: 170 × 130px
Total Space: 200 × 160px
CONTENT
This is the actual
content area

📝 Generated Inline Style

<div style="width: 120px; height: 80px; padding: 20px; border: 5px solid #4a90e2; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; margin-left: 15px;">
Your content goes here
</div>

Alternative: CSS Class Style

.my-element {
  width: 120px;
  height: 80px;
  padding: 20px;
  border: 5px solid #4a90e2;
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
}

📖 Box Model Explanation

Margin: Space outside the element (now controllable per side!)
Border: Line around padding & content
Padding: Space inside element, around content
Content: The actual content (text, images, etc.)