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
0
votes
2 answers

Table cells overflow despite box-sizing: border-box

I want to add padding to the cells of my table, but this causes text, inputs, etc inside the table to overflow. From other Stack Overflow discussions, I've gathered that the answer is to set box-sizing: border-box, but this isn't working for…
Brian Tomasik
  • 37
  • 8
0
votes
1 answer

When I scale down the page, the box for the class "rcorners2" goes off the page at some parts. How do I fix this so it scales down smoothly?

The expected result is for the box to scale down and fit into the center of the page without going off the side of the page. However, the actual result is that it goes off the side of the page when I scale down to some sizes. I don't really…
Marcus
  • 11
  • 1
  • 3
0
votes
2 answers

HTML CSS : Borders (Boxes) of fixed Divs cross each other when window size changes

I want to achieve following design where Header div having class named header, Footer div having class named footer and a Left sided div having class named links are fixed to there position. The Right sided div named link-contents is the only…
Abhay
  • 524
  • 1
  • 13
  • 28
0
votes
1 answer

Box-sizing all elements in css

What is the meaning of this code? Please explain why this has to be in my codes? *, *:before, *:after { box-sizing: inherit; }
Mostafa Khan
  • 47
  • 5
0
votes
2 answers

Why is the "box-sizing" property throwing off display of my "i" icon?

I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML

PersonA

i
and the below style #personName…
user7055375
0
votes
2 answers

box-sizing doesn't works on li with inline-block

I don't know why, but only on my footer with li in inline-block and border-top on active class, my box-sizing : border-box doesn't work. When the class is active, there are a border-top, and we see a gap on the bottom. Here an exemple : * {…
Deubow
  • 3
  • 1
0
votes
4 answers

Div width percentage not working in CSS

Here is my CSS: .leftdiv { width:20%; border:2px solid blue; float:left; } .middlediv { width:60%; border:1px solid orange; float:left; } .rightdiv { width:20%; border:1px solid black; float:right; } Here is my…
Ray
  • 21
  • 1
  • 3
0
votes
1 answer

Why can't I align divs in the following scheme / why is the last container not visible?

I would like to align seven divs in another parent container, all should have the same height (as the parent container) and width, except the very first and the last one. I tried something like that: HTML
j3141592653589793238
  • 1,810
  • 2
  • 16
  • 38
0
votes
2 answers

Make a div adjust to borders?

So i have the following html/css code * { box-sizing: border-box; } .mainlink { font-family: "Source Sans Pro", sans-serif; font-size: 30px; color: rgba(255,0,0,0.7); transition: 0.3s ease-in-out; text-decoration:…
Lukeception
  • 75
  • 1
  • 6
0
votes
1 answer

Undefined mixin 'box-sizing'

I have a Rails 4.2.5 project that has been humming along. Quite literally all of a sudden, I get this error: Undefined mixin 'box-sizing'. which points back to my stylesheet include: <%= stylesheet_link_tag 'application', media: 'all',…
RubyRedGrapefruit
  • 12,066
  • 16
  • 92
  • 193
-1
votes
1 answer

Using border-box; with padding?

The reason why I’m asking is because there is padding: 25px; added to it. Is it a good idea here to add box-sizing or not? Box-sizing Removed https://jsfiddle.net/wby16ep8/1/ .container { width: 936px; padding: 25px; margin: 100px auto; …
user10897505
-1
votes
1 answer

Why does box-sizing not apply here?

I have a table cell with box-sizing: border-box, which means that when I specify width: 100px it INCLUDES any borders. I have this cell with a set width of 16px and border-box. Still, the element renders as 26px wide.…
Blooker20
  • 13
  • 1
  • 6
-1
votes
2 answers

CSS Layout Issue across devices

This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare. Consider this image: The blue line represents the viewport. The layout is…
Erick
  • 369
  • 3
  • 13
-1
votes
2 answers

Align borders by CSS with nested divs

I have the layout in https://jsfiddle.net/Ld07e4s7/4/ but I'm unable to make the first blue-border go to the same extent as the others blue-borders. div.table { width: 100%; } div.table > div.header .grid-column { float:…
Adriano dos Santos Fernandes
  • 735
  • 5
  • 19
-2
votes
1 answer

Get Rid Of Blank Space due to box-sizing property of parent element

I am creating a table and I have used box-sizing: border-box; property for its parent element body. I'm getting a vertical red line on the right in Chrome for some screen resolutions (try to zoom in and out to see it). I want to get rid of this red…
Mansoor Ahmed Memon
  • 111
  • 2
  • 16
1 2 3
4
5