Stack Overflow
Stack Overflow

Questions tagged [box-sizing]

a CSS3 Box Model property that specifies whether or not an element's border and padding are included in its height and width

This CSS3 Box Model property specifies whether or not an element's border and padding should be included when determining its height and width.

The two possible values are content-box and border-box.

content-box

The element's border, padding, and margin are not included when determining its height and width. This is the default value and the behavior specified in CSS2.1.

  • height = content height
  • width = content width

border-box

The element's height and width include its border and padding.

  • height = border + padding + content height
  • width = border + padding + content width

Resources

Related Tags

62 questions
41
votes
5 answers

Does it exist an equivalent of box-sizing: border-box in flexbox for React Native?

I would like the size of my boxes not to be changed by margin and padding.
void42
  • 921
  • 2
  • 10
  • 14
6
votes
3 answers

How to override box-sizing: border-box; on a specific section

I have a * {box-sizing: border-box;} property that keeps the contact form inputs nice and separate, but it makes the small "gallery" above it move slightly off the center to the left, and I can't find how to override it for that particular section..…
Smithy
  • 807
  • 5
  • 17
  • 43
6
votes
3 answers

INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

I found a nearly identical case to mine here. But the accepted answer does not work for me so I hope it's OK that I make a new question. The pic below is what I want to achieve in all major browsers (at least IE8+, Firefox and Chrome). INPUTs placed…
Thanh Nhan
  • 453
  • 6
  • 17
5
votes
1 answer

Safari border-box height bug on 100% height img with padding on parent

When using box-sizing: border-box in Safari, there is a bug affecting the height of an img element when using height: 100% and a padding on the parent element. See this fiddle and test it on Chrome/Firefox versus Safari to see the difference:…
Arko
  • 696
  • 2
  • 5
  • 19
4
votes
0 answers

HTML table cells get larger when images are added and screen size is changed; why?

I have a question about my HTML table. I used JavaScript to add eight rows and eight columns to a table I defined with HTML. I also used CSS to format the cells and images that go inside the cells. The issue is that the larger I make the screen, the…
Josiah Plett
  • 180
  • 14
4
votes
2 answers

box-sizing: border-box with no declared height/width

I'm trying to understand how box-sizing: border-box work in the code below. When the height or width is set (no padding), it works as intended (border appears inside the div). But if you only use the padding to create the dimension of the div, it…
MrLearner
  • 141
  • 2
  • 8
4
votes
2 answers

box-sizing - 'outline' is calculated in 'border-box' OR 'content-box'?

When calculating width and height of the box, outline width like outline: 5px dashed red; if box-sizing:border-box, is outline will be considered in the width/height of the box ?
anon
4
votes
1 answer

Why inline-block does not expand to parents computed height?

In the following code, child's (inline-block) width expands to 100% of it's parent's computed width but I do not know as to why the height of the .child does not expand to the .parent's computed height. * { -webkit-box-sizing: border-box; …
appu
  • 471
  • 1
  • 8
  • 26
3
votes
2 answers

SVG with width 100% overflows its container

In the below snippet, adding the svg element causes a vertical scrollbar to appear. Removing the svg removes the scrollbar. I'd like to understand why its happening and whether there's a solution that isn't horrible (e.g. width:99%; height:98%…
user2728841
  • 1,333
  • 17
  • 32
3
votes
2 answers

How is padding calculated when using percentage (%)?

Why does the padding in this example not equal 300px? #Test{ width:600px; padding-right:50%; box-sizing:border-box; background:#ddd; }
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK…
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
2
votes
3 answers

box-sizing: border-box; doesn't affect textarea

I searched for a way to size a textarea according to the rest of my layout and stumbled over the box-sizing method. I probably didn't use it correctly because it doesn't work for me. I have a layout that shows 3 different rows. The middle row should…
Lukas
  • 61
  • 4
2
votes
0 answers

Border-box VS content-box, Which is better to reset in reset css?

As we know, Bootstrap sets the border-box as the value of box-sizing in reset.css. But the default value of box-sizing is content-box. And in my current usage, I always use the default value because of the rule-convention over configuration. Which…
Jamter
  • 435
  • 5
  • 13
2
votes
0 answers

Flex item not growing correctly with borders and box-sizing: border-box

As per my understanding of flex algorithm for boxes which are border-box, for calculating the remaining space (for distribution of free space to flex items), apart from flex item's main size property, only margins are included. But it seems browsers…
HarshG
  • 267
  • 1
  • 3
  • 10
2
votes
2 answers

Contained element overflowing container despite box-sizing

I'm struggling to figure out why I have an element with height:100% which is larger than its container despite box-sizing being set to border-box; I've made a fiddle here: https://jsfiddle.net/a8v9a8ok/6/ I've set elements to 100% height and…
ministe
  • 543
  • 1
  • 5
  • 17
2
votes
1 answer

flex-box box-sizing: border-box not working

As title says: .cnr{ display: flex; height: 100%; background-color: grey; position: absolute; border: 1px red solid; } .cnr > div{ box-sizing: border-box; padding: 1em; border: 1em solid; overflow: hidden; } .cnr >…
BigName
  • 1,018
  • 2
  • 14
  • 29
1
2 3 4 5