Menu
I have an element with a 70% width, and it is floating beside an element with 30% width, but when I add 25px of padding it expands the element and breaks the format, is there any way to make it just increase the contents distance from the edge as opposed to just making it bigger?
222
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following. This tells the browser to account for any border and padding in the values you specify for an element's width and height.
Normally, when an element's size is set, the width and height properties determine the width and height of the element's content box. Any padding added to the element will increase the total computed width and/or height of the element—this is how the default box model works in regards to sizing the element.
So why does this happen? This is because browsers by default add all the padding , margins , etc to the overall height and width of the element, in our case it is the div HTML element. By default, the box-sizing CSS property of the element will be set to content-box which causes this unpredictable behavior.
The box model of an element in CSS—includes the content, padding, border, and margin areas. Any padding added to the element will increase the total computed height of the element, so you may not always end up with the expected height using just the height property if you also add padding to your element.
When you use the border-box model, the padding is included in the box size. See here for details.
<!DOCTYPE html> <html> <head> <title>padding example</title> <style type="text/css"> .seventy { display: block; float: left; width: 70%; background-color: red; } .thirty { display: block; float: left; width: 30%; padding: 25px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: green; } </style> </head> <body> <div class="seventy">Stuff</div> <div class="thirty">More Stuff</div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
