Stack Overflow
Stack Overflow

Questions tagged [border-box]

This is one of the 3 allowed values for the CSS box-sizing property. When this box model is used, the width and height properties include the padding and border, but not the margin.

This is one of the 3 allowed values for the CSS box-sizing property. When this box model is used, the width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.

Example

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
97 questions
120
votes
5 answers

How to get equal width of input and select fields

On the form, I have one select and two input fields. These elements are vertically aligned. Unfortunately, I can't get equal width of these elements. Here's my code: and
I realised that has a border-box box model, whereas has a content-box box model. This behavior is present in IE8 and FF. Unfortunately, this prevents me from applying this style for nice evenly sized…
Eric
  • 95,302
  • 53
  • 242
  • 374
10
votes
1 answer

* { Box-sizing: border-box; } : To border-box or not to border-box all elements?

I will start developing a new website, and I'm getting ready to deal with the different methods browsers use to calculate width and height of elements (box model stuff). Somehow, it came to my mind: what if I just apply box-sizing to all elements in…
Cthulhu
  • 5,095
  • 7
  • 46
  • 58
6
votes
2 answers

Chrome vs. box-sizing:border-box in a display:table

I'm doing a small 2-pane layout using display:table. For spacing (also from the background image), I use padding. As I need the children to have an exact width:50% from the available space (taking regard for the padding of the parent div), I use…
fabb
  • 11,660
  • 13
  • 67
  • 111
6
votes
4 answers

CSS: how to set the width of form control so they all have the same width?

Consider the following example:
avernet
  • 30,895
  • 44
  • 126
  • 163
5
votes
4 answers

Nested divs producing a scrollbar. Why?

I have 3 nested divs:
The .inner div is position absolute and they each have 1px border: .outer{ width:50%; height:100px; border: 1px solid red; …
Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
5
votes
2 answers

inline-block boxes not fitting in their container

Not sure what I'm doing wrong, I thought that by adding border-box, it would fit those 4 boxes neatly. http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ …
Snorlax
  • 4,425
  • 8
  • 37
  • 68
5
votes
1 answer

Understanding offsetWidth and clientWidth when css border-box is active

I come from this question: Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively I understand that this is the case for the standard box model, is that right? But what happens when you have something like this: *{ …
Vandervals
  • 5,774
  • 6
  • 48
  • 94
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

border-box not working on inline-block elements?

I have a list of inline-block elements, and I want to add a border to the element you hover over. However, notice how the border offsets the element, even when I use box-sizing: border-box and explicitly define the widths and heights of the…
woojoo666
  • 7,801
  • 7
  • 45
  • 57
1
2 3 4 5 6 7