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
1
vote
2 answers

Inlining box-sizing style in React

Is there a way to setup box-sizing by inlining it in React, instead of including it via CSS? is it recommended, or needed, or is there an alternative? Here's a sample CSS snippet of what I mean: body { margin: 0; padding: 0; …
foobar
  • 3,849
  • 8
  • 22
  • 32
1
vote
2 answers

li width not fixing with parent ul tag

I've checked some web pages I've developed. There are some css problems for li width. Here is the code for the navigation menu: ul.tabs { padding: 0px; list-style: none; background: transparent; border-bottom: 3px solid #ff6600; …
Andrew Li
  • 1,005
  • 12
  • 29
1
vote
1 answer

jquery appoints the wrong height of an element with property border-size: border-box

I have an element with an arbitrary height. Element have properties box-sizing: border-box. If using jquery appoint 100px height, the result would be the height of the element is equal to 120. What could be…
Юрий Жулин
  • 25
  • 5
1
vote
3 answers

Right Div Incorrectly Aligns Left 25% of Page

I'm trying to center one div responsively by wrapping it between two divs - the centerdiv and the sidedivs. The code: .overmiddlediv { width: 100%; height: 150px; background-color: blue; float: left; } .sidedivs { width: 25%; …
wpquestionz
  • 149
  • 8
1
vote
10 answers

Not able to arrange two divs side by side

Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me. I am building a messaging service and for that I have two divs, contacts_box (300px) and message_box(500px). They…
Shah Quadri
  • 219
  • 1
  • 2
  • 11
1
vote
3 answers

Vertical align conflicts with border box

I want to say that I've tried everything, but I refuse to believe that's true. I'm trying to vertical-align an image inside a div. Although it looked like it worked, I noticed there was more space above the image than below. After some debugging, I…
SomeCode
  • 179
  • 2
  • 15
1
vote
1 answer

Box sizing all elements within div

I'm using the bootstrap 4.0 minified css on an application site I want to inject over the top of another site. Here is the file: http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css The issue I'm having is the…
Filth
  • 3,116
  • 14
  • 51
  • 79
1
vote
3 answers

CSS: Wrapping Divs

I have a CSS menu using the checkbox:checked trick here But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other…
Luke T O'Brien
  • 2,565
  • 3
  • 26
  • 38
0
votes
2 answers

How to position table-cell in a box-element

I made a Chessboard using HTML and CSS for an assignment. Now I need to position this Chessboard inside the box element so the margin left/right will be the same and the header element is shown. I tried using margin: auto; but this didn't work…
Ron1986
  • 35
  • 5
0
votes
1 answer

Is box-sizing also a non-inheritable property just like margins and border properties are?

I'm new to css and I tried playing with css inheritane. When I added box-sizing:border-box property to body , it doesn't get inherited by its child elements( in my case a
element). Is it just like other non inheritable properties like…
rishabh kohli
  • 3
  • 1
0
votes
1 answer

Child divs having issues with height in flex box property

I have been having issues with the child divs of flex containers taking up the full height of the container they are in. I have tried inheriting height and percentages and it is not working. Ideally, I am going for this format. Here is the code I…
Andrew Python
  • 67
  • 9
0
votes
1 answer

Margins being added to the total width despite using box sizing

I'm running into an issue where the margin of my elements is being added to their total width, rather than being taken into account before the width is calculated, despite using the box-sizing: border-box property. So basically, I have 2 elements: a…
Dasphillipbrau
  • 524
  • 2
  • 8
  • 17
0
votes
1 answer

Border-box behavior with flexbox

I'm trying to create a column-based layout with specific gutter sizes using flexbox. I would like to include the option to add a class like col-2 to a given element that would make that element the size of 2 of the other elements in that row, for…
yevg
  • 1,846
  • 9
  • 34
  • 70
0
votes
1 answer

Why is my 100vh div bigger than the viewport?

I have a div which is supposed to exactly fill the viewport, using height: 100vh and width: 100%, but (in Chrome and Safari at least), is slightly larger, so that scroll bars are generated. Why is this and how do I get the div I want? Example code…
Nigel
  • 585
  • 1
  • 5
  • 20
0
votes
1 answer

Why does my element's content area go outside of its parent element?

Note: Since I have been trying to extract the code from a wordpress environment Salient theme, I have not been able to reproduce the issue in it's simplest form yet, I may end up answering my own question but please be aware that I appreciate any…
Bobstar89
  • 27
  • 6
1 2
3
4 5