CSS 14 💻 box model

Box Model is a fundamental concept in CSS
It defines how elements structured and displayed
Content Area → This is the actual space occupied by the element's content
Padding → this is the space between the content area and the border
it creates some space around the content to create visual separation. 
Border → this is the line that separates the padding from the content area. 
Margin → This is the space between an element and its adjacent elements. 

standard CSS box model → The box size of an elements is defined by its width and height...
plus border and padding
.box width → 150 + 5 + 5 + 25 + 25 = 210px
.box height → 50 + 5 + 5 + 25 + 25 = 110px
alternative CSS box model → The box size of an elements is defined by its width and height
The content area width and height is calculated by subtract padding and border
to use the alternative model for an element, use box-sizing: border-box
for all the elements  use...
*,   *::before, *::after{ 
     box-sizing: border-box; 
}

14 – block model

<div class="boxmodel">
    <div class="margin">
        <p>Margin</p>
        <div class="border">
            <p>Border</p>
            <div class="padding">
                <p>Padding</p>
                <div class="content">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
</div>

.border {
    padding: 45px;
    width: 80%;
    height: 100%;
    position: relative;
    background-color: rgb(243, 188, 80);
}

.margin {
    background: #d2cece;
    padding: 45px;
    width: 100%;
    height: 100%;
    position: relative;
    border: 2px dashed #bbb;
}

.padding {
    padding: 45px;
    width: 90%;
    height: 100%;
    position: relative;
    background: #d2cece;
}

.content {
    padding: 20px;
    width: 90%;
    height: 100%;
    position: relative;
    background: white;
    border: 2px dashed #bbb;
}

.box {
  width: 150px;
  height: 50px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!