How come the width factor encompasses the border when the box-sizing is set to content-box?

Question

How come the width factor encompasses the border when the box-sizing is set to content-box?

My HTML file contains the following code:

<html lang="en" class=""><head>

  <meta charset="UTF-8">
  <title>CodePen Demo</title>

  <meta name="robots" content="noindex">

  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
  <link rel="canonical" href="https://codepen.io/hardkoded/pen/VwjvWBm">
  
  ... (skipping some code for brevity) ...
  
  
  ... (skipping some code for brevity) ...

  
  </script>


</body></html>

This is actually a modified Tic Tac Toe game from this CodePen link: https://codepen.io/sophiebits/pen/qNOZOP. I made some changes to it.

When inspecting one of the squares in Chrome, I noticed that the computed CSS box model showed a content width of 32px, even though I set the square's width to be 34px in the CSS. Shouldn't the computed width match what was specified in the CSS?

I'm aware that the default value of box-sizing is content-box, meaning the width property should exclude any border or padding. So why is there discrepancy between the specified width and the computed width of the square?

https://i.sstatic.net/WxcO6.png

html css

Answer 1

Answer №1

Buttons (as well as some other elements) are designed with a box-sizing property of "border-box" rather than "content-box," which is why they behave differently.

If you need more information, check out the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

To modify this in your CSS code, use:

.square{
   box-sizing: content-box; /* border-box */
}

Answer 2

Buttons (as well as some other elements) are designed with a box-sizing property of "border-box" rather than "content-box," which is why they behave differently.

If you need more information, check out the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

To modify this in your CSS code, use:

.square{
   box-sizing: content-box; /* border-box */
}

Answer 3

Answer №2

Take a look at this straightforward JSFiddle example: https://jsfiddle.net/3wr8n9u2/

<div class="container"></div>

.container {
  background: green;
  border: 4px solid purple;
  width: 15px;
  height: 15px;
}

In my opinion, the height is just right!

https://i.sstatic.net/LmPtS.png

To make it easier for us to determine the issue, consider providing a more concise example in your query.

Nevertheless, as mentioned in another response, the challenge may lie in certain elements having a different default value for box-sizing.

Answer 4

Take a look at this straightforward JSFiddle example: https://jsfiddle.net/3wr8n9u2/

<div class="container"></div>

.container {
  background: green;
  border: 4px solid purple;
  width: 15px;
  height: 15px;
}

In my opinion, the height is just right!

https://i.sstatic.net/LmPtS.png

To make it easier for us to determine the issue, consider providing a more concise example in your query.

Nevertheless, as mentioned in another response, the challenge may lie in certain elements having a different default value for box-sizing.

Answer 5

Answer №3

Essentially, the concept of box-sizing is what determines whether an element's width should include its border or not.

For instance, if you have a div with a width of 300px and you apply box-sizing: border-box like this:

div {
  width: 300px;
  height: 100px;
  border: 10px solid blue;
  box-sizing: border-box;
}

The width of the div will always remain at 300px - accounting for 20px of border and 280px of content. Any adjustments to padding or border size will impact the content area.

On the other hand, using box-sizing: content-box like so:

div {
  width: 300px;
  height: 100px;  

  border: 10px solid red;
  box-sizing: content-box;
}

This would result in the div having a width of 320px - including 300px of content and 20px of border width.

To maintain a specific width or height for your element, such as 50px, utilizing box-sizing: border-box would be the way to go.

Answer 6

Essentially, the concept of box-sizing is what determines whether an element's width should include its border or not.

For instance, if you have a div with a width of 300px and you apply box-sizing: border-box like this:

div {
  width: 300px;
  height: 100px;
  border: 10px solid blue;
  box-sizing: border-box;
}

The width of the div will always remain at 300px - accounting for 20px of border and 280px of content. Any adjustments to padding or border size will impact the content area.

On the other hand, using box-sizing: content-box like so:

div {
  width: 300px;
  height: 100px;  

  border: 10px solid red;
  box-sizing: content-box;
}

This would result in the div having a width of 320px - including 300px of content and 20px of border width.

To maintain a specific width or height for your element, such as 50px, utilizing box-sizing: border-box would be the way to go.

How come the width factor encompasses the border when the box-sizing is set to content-box?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to extract the content within a nested <p> element from an external HTML document using the HTML Agility Pack?

Revamping CSS for a Responsive Wordpress Tesseract Theme

Tips for properly aligning blockquote opening and closing quotation marks

Adjusting the spacing between dropdown menu items in Bootstrap sass with Rails

Incorporating a custom object into two dropdown menus using JavaScript

Swap out original source files in HTML with minified versions

AngularJs fails to render CSS styles

In ReactJS, ensure only a single div is active at any given moment

Trigger the onClick event of an element only if it was not clicked on specific child elements

Trigger the opening of a bootstrap modal from an external source on the current page

When I update URLs in Django, my CSS breaks down

Tips on quickly validating a form using JavaScript

Unique 15-character code following email address

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

PHP - display the modified page with the updates applied

The issue of innerHTML malfunctioning when multiple eventListeners are used in a JavaScript code for the "Type Ahead" feature

Issues arise when using jQuery to manipulate HTML content within an Asp.Net environment

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

After applying CSS, I am unable to click on the radio buttons