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
2
votes
1 answer

border-box isn't working as expected

I have two parent elements, and 3 children inside. (#grandParent>#parent>#children*3) grandParent has a set height and width, and parent has padding applied. All elements have box-sizing: border-box. With border-box applied, the padding should make…
Jessica
  • 9,379
  • 14
  • 65
  • 136
2
votes
1 answer

Why is the size of the s changing when border is added inside it using the box-sizing property?

I'm using the .click JQuery method to add .clicked to whenever it is clicked. .clicked contains a border and the box-sizing property set to border-box. When I click two consecutive s either horizontally or vertically, their size seems to…
Aazib
  • 57
  • 1
  • 6
2
votes
1 answer

box-sizing border-box not working for top and bottom border

I'm learning to build a responsive website for myself. I'm having a problem with the box-sizing border-box on the top and bottom borders of one of my images. I have two columns of images of different heights, I want the edges to match up but I also…
pretesh
  • 21
  • 1
  • 3
2
votes
3 answers

Can I use in global box-sizing:border-box in my project?

Can I use in my all murkup (all project ) box-sizing: border-box;? for example: html { box-sizing: border-box; }, :before, *:after { box-sizing: inherit; } Because it is easier to count the real width, but are there any downsides to this…
Limarenko Denis
  • 769
  • 1
  • 8
  • 13
1
vote
1 answer

Why I cannot change height of the following autocomplete boxes with inline styles? How to set its height as some as button height?

I want to change Height of Autocomplete box in react.js but only width is rendered not height although I'm using both properties
cheese-popcorn
  • 17
  • 1
  • 4
1
vote
1 answer

Setting `element.style.height` not working as expected if `element.style.box-sizing` is `border-box`

I am having an understanding problem with the following code: let myDiv1 = document.getElementById("myDiv1"); alert("Click me to make 'Hello' vanish"); myDiv1.style.height = "0px"; let myDiv2 = document.getElementById("myDiv2"); alert("Click…
Binarus
  • 4,005
  • 3
  • 25
  • 41
1
vote
2 answers

Padding doesn't allow pseudo elements to create border-bottom

I try to create the border bottom radius for h2 elements using pseudo elements. But When I apply padding, top-left and top-right of border-bottom-radius were not reflected. But if I applied margin, it was reflected. I can't understand why this…
Kazu25
  • 87
  • 1
  • 2
  • 13
1
vote
2 answers

Image full width wrong height size in table cell

I have made a table which has two rows and nine columns. The first row, I have combined cells and make it into three columns. I have set the full image width fit on each cell of the table. The first row has three pictures, and there is something…
ToujouAya
  • 593
  • 5
  • 24
1
vote
1 answer

why is padding not being applied internally when using border-box

I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it. So, I've got four boxes arranged in a container: div { box-sizing: border-box; padding: 0; margin: 0; } .wrapper…
jbowman
  • 380
  • 3
  • 15
1
vote
0 answers

1px Solid Border Bottom enables padding on explicit 0 width text input?

I was under the impression that if an element has a set height & width of 0, padding wouldn't push the width/height if the box-sizing is also set to border box, the thing is, this does seem to be the case, but as soon as I add a 1px solid border,…
brandito
  • 698
  • 8
  • 19
1
vote
1 answer

Alternative to box-sizing

i have this box, and i want to make it responsive h2{ margin: 0; padding: 0; border: 0; } ul { background: #fff; float: left; padding: 15px 0; width: 655px; border: 1px solid #000; …
Robert
  • 59
  • 1
  • 9
1
vote
1 answer

Am I correct that I do not need to use box-sizing to create fixed width element as long as padding property is not used

Am I correct that if I have specified width of an HTML element (eg a button) to keep the width fixed then I do not need to specify box-sizing as long as I have used only padding-top and padding-bottom properties? I want to create fixed-width…
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184
1
vote
2 answers

CSS Resetting Margin and Padding

If I use the box-sizing property to border-box, does it make resetting margin and padding to 0 irrelevant or is it still something I should do? i.e. * { box-sizing: border-box; margin: 0; padding: 0; }
kudeh
  • 883
  • 1
  • 5
  • 16
1
vote
1 answer

flex-box with box-sizing: border-box not working because border (apparently)

I'm trying to build a table from scratch with flexbox, and I want to implement rowspan and colspan with the property flex. But it doesn't work, I because the border, even when border-box is set My result is: /* Styles go here */ *{ …
user8410236
1
vote
1 answer

Pseudo elements not aligning with anchor tag border

I have the following CSS3 button animation: HTML:: Hover on Me CSS: /* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ body { height: 100vh; display: flex; align-items:…
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
1
2
3 4 5