Skip to main content

Role of box-sizing and its attributes in css

 

🧱 Default behavior (content-box)

By default, browsers use:

box-sizing: content-box;

This means:

Total element width = content width + padding + border

So if you have:

.container {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Then the total visible width becomes:

300 (content) + 40 (left + right padding) + 10 (left + right border) = 350px

⚠️ The box becomes wider than 300px, which can cause overflow or layout shifts.

✅ With box-sizing: border-box

When you use:

box-sizing: border-box;

the formula changes to:

Total element width = width (including padding + border)

So the same CSS now behaves like this:

width = 300px (total)
→ content area = 300 - (40 padding + 10 border) = 250px

✅ The box stays exactly 300px wide — no overflow.

🎯 Why it’s useful

  • Prevents unexpected overflow due to padding/borders

  • Makes responsive layouts easier

  • Keeps your box sizes consistent

  • You can trust width to be the actual visible width.

🌍 Common best practice

Developers often apply this globally:

* {
  box-sizing: border-box;
}

So every element (and pseudo-element) uses border-box by default.
This way, your layouts behave predictably everywhere.

🧩 In your case

For your .container:

.container {
  width: 80%;
  margin: auto;
  padding: 5em;
  background-color: whitesmoke;
  box-sizing: border-box; /* ✅ prevents overflow */
}

Now, even though you have padding: 5em,
the total width will stay within 80% of the parent — no horizontal scroll ✅

Would you like me to make a small side-by-side HTML example showing content-box vs border-box visually? It’ll make this concept super clear.

You said:
yes
ChatGPT said:

Perfect 👍 Here’s a simple side-by-side example showing the difference between content-box and border-box visually.

You can copy this into any HTML file and open it in your browser 👇

🧩 HTML + CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box-Sizing Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      gap: 20px;
      padding: 20px;
    }

    .box {
      width: 300px;
      padding: 30px;
      border: 5px solid #007BFF;
      background-color: lightblue;
    }

    .content-box {
      box-sizing: content-box; /* Default */
    }

    .border-box {
      box-sizing: border-box; /* Prevents overflow */
    }

    .label {
      text-align: center;
      font-weight: bold;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div>
    <div class="box content-box">content-box</div>
    <div class="label">Total width > 300px (overflow risk)</div>
  </div>

  <div>
    <div class="box border-box">border-box</div>
    <div class="label">Total width = 300px (fits perfectly)</div>
  </div>
</body>
</html>

🧠 What you’ll see:

  • The left box (content-box) is wider than 300px because padding and border are added on top of the width.

  • The right box (border-box) is exactly 300px wide because padding and border are included in the total width.

Comments

Post a Comment

Popular posts from this blog

Tailwind css and its corresponding vanilla css

Tailwind Class CSS Property Vanilla CSS Equivalent Description bg-white background-color background-color: #ffffff; Sets background color to white. shadow-sm box-shadow box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); Adds a small shadow under the element. border-b border-bottom-width border-bottom-width: 1px; Adds a bottom border. Default color: #e5e7eb (gray-200). max-w-7xl max-width max-width: 80rem; /* 1280px */ Restricts container width for large screens. mx-auto margin-left , margin-right margin-left: auto; margin-right: auto; Centers the container horizontally. px-4 padding-left , padding-right padding-left: 1rem; padding-right: 1rem; Adds horizontal padding (16px). sm:px-6 Responsive padding (small screens ≥640px) @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } Increases padding on small screens. lg:px-8 Responsive padding (large screens ≥1024px) @media (min-width: 1024px) { padding-left: 2rem; paddi...
Post a Comment
Read more

Rest and spread operator in javascript

  Absolutely 👍 — here are several practical and clear examples of the rest operator ( ... ) in JavaScript, covering functions, arrays, and objects 👇 🧮 1. Rest in Function Parameters When you don’t know how many arguments a function will receive: function multiply ( factor, ...numbers ) { return numbers. map ( n => n * factor); } console . log ( multiply ( 2 , 1 , 2 , 3 , 4 )); // Output: [2, 4, 6, 8] 👉 factor gets the first argument ( 2 ), and ...numbers collects the rest into an array [1, 2, 3, 4] . 🧑‍🤝‍🧑 2. Rest with Array Destructuring You can collect remaining array elements into a variable: const fruits = [ "apple" , "banana" , "mango" , "orange" ]; const [first, second, ...others] = fruits; console . log (first); // "apple" console . log (second); // "banana" console . log (others); // ["mango", "orange"] 👉 The rest operator gathers all remaining elements afte...
Post a Comment
Read more