I have a div with a width of 100% and paragraphs inside. The div has padding of 1.1em. On Chrome evrything works as expected - div spans to 100% of parent's space and paragraphs get squeezed a little due to the padding.
However on Firefox div expends to 100% + padding. How to do I force inner padding on firefox?
How to do I force inner padding on firefox?
Use box-sizing: border-box; for the element, as by default, the padding border and margin are counted outside the element.
Using box-sizing: border-box; will alter the box model, which will make the padding and border to be counted inside the element instead of outside.
Demo Without box-sizing
Demo With box-sizing
See the difference? You won't get a horizontal scroll bar in the second demonstration, where am using border-box value for box-sizing property.
Related
Why does adding some padding affects elements outside the DIV box? Padding isn't supposed to create some space between the border of the DIV and contents inside it? How can you create this space without affecting elements outside the DIv box?
How can you create this space without affecting elements outside the
DIv box?
Use box-sizing: border-box
From MDN:
border-box
The width and height properties include the padding and
border, but not the margin.
The reason that this property must be set is because by default the value for box-sizing is content-box. Again from MDN:
content-box This is the default style as specified by the CSS standard. The width and height properties are measured including only
the content, but not the padding, border or margin.
Assuming you have specified a content height or width, then padding will be placed around that. That moves the border outwards. That moves the margin outwards. That pushes nearby elements away.
You can change it by reducing the height and/or width to compensate or by using the box-sizing property to make height and width determine the distance between the outside edges of the border instead of the outside edges of the content.
Try looking into the box-sizing property...
https://css-tricks.com/box-sizing/
Today, the current versions of all browsers use the original "width or
height + padding + border = actual width or height" box model. With
box-sizing: border-box;, we can change the box model to what was once
the "quirky" way, where an element's specified width and height aren't
affected by padding or borders. This has proven so useful in
responsive design that it's found its way into reset styles.
The value you're after is border-box:
.class {
box-sizing: border-box;
}
I want to make a box with content that is vertically centered, but also scrolls if the content overflows. I can use a table with vertical-align: middle to achieve the vertical centering, but td's can't overflow scroll, so I put a scrolling div inside the td and made it height: 100%. That's fine until I try to give the scrolling div some padding, which makes it too wide for the td so I give it box-sizing: border-box. Then all of a sudden there's a top and bottom margin on the div!
WAT!?
http://codepen.io/jessehattabaugh/pen/GIjiL
There shouldn't be any space between the green line and the red line, but there it is! If you change the padding on the green div the mysterious margin changes. It's as if the height: 100% is actually 100% - padding or something. If you remove padding, or box-sizing: border-box it goes away.
BONUS POINTS: why doesn't FF respect the table's height: 50% rule when Chrome/Saf do?
Update: some are suggesting that border-collapse or border-spacing fixes, but here's what it looks like after I apply those rules to the table;
The table cell's red border collapses with the blue table border, but the green div's border still has space above and below it. Maybe try resizing the height of the browser and see what happens.
Your browser is adding space around the table. In Chrome add:
table {
border-spacing: 0px;
}
On my page I have several elements defined to be 100% of the window's width, however I'm getting unexpected results from some of the divs. For example, if I use console.log to print out the window.innerWidth, I get a value of 1541, but when inspecting the html, body, and a few other divs that are set to width=100%, their calculated widths are 1526.
Even stranger, I'll begin to see a horizontal scroll bar before the content begins to be too wide for the browser and some of the elements span past the scrollbar and some do not.
A very strange issue indeed, please have a look at the site if anyone can point me in the right direction that would be wonderful:
http://www.newnoisegroup.org
div elements (and other display:block elements) default to stretching to the width of their container anyway, so setting width:100% for them is usually unnecessary anyway.
However if you do set them to width:100%, you can get issues like this because width:100% is not the same as stretch to full width.
The difference is that in the standard box model, the width of an element is the inner width; the border and margin are added on outside of box.
Therefore, if you have a box with width:100%and, for example,border:1pxandmargin:5px`, you will get 100% width plus an additional 12 pixels. This will clearly give you unwanted scroll bars as the box is wider than its container.
There are two solutions here:
Use width:auto or no width setting at all rather than width:100%.
Use box-sizing:border-box to switch the box model so that the border and margin are inside the width, so that width:100% will then produce a box that is actually 100% of the width of its container.
Hope that helps.
using box-sizing can fix width issues.
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
It often resolves issues with width and margin/padding
I have a div with this css specifications:
width:200px;
padding:5px
border:1px solid
and another div as it's child with this css:
width:100%
border:1px solid
and these divs has rendered in FF and IE like this:
But it seems the right padding is less than left one! can any one tell me why this behavior causes?
Thanks
this happens because the borders of the inner div are not part of the definition of the width itself, so your inner div is actually 100% + 2px wide.
you should specify box-sizing: border-box; for the inner div, so its width will include borders
See the MDN documentation for further information (and browser support) about this property.
Its the border that pushes it to the right. set box-sizing: border-box to the inner div.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
You should check the box model once again.
You are having a div with width 100% and adding border 1px to it, so the divs becomes 100% + 2px width and it's pushed to the right like you see.
You should drop the "width: 100%" and add just the border. (since the div is a block element it will take the full width)
You don't need to add box-sizing even, since IE7 won't support it. (if you want IE7 support)
What is the overflow like on your parent element? Unless I am mistaken your setting the width to 100% with a border, so the width is 200px inside a div that is 200px and so the border will not show.
My quick solution (sure there is a better way) would be to make the padding on the right 2px more or left 2px less than the overall padding.
My question is how to manage the size of an element (let's say a div) with percentage. I have a situation where I made two divs float side by side and both takes 50% of the div that contains them. Each of these two div have borders of 1px, margin of 5px and some padding. So how am I supposed to manage these static sizes and the dynamic size of the content (divs). Cause in the case I just mentioned, they will not float side by side because of the borders, padding and margin that make the size over (100%).
What are the solutions? In my case the sizes of margin/padding/borders are small so I guess I could just set the size a bit lower (like 45%) and hope it will fit. But I think this method is sloppy, since if I set the size of the padding higher, I will have to adjust the size of the div with trials and errors until I find the perfect size. Is there a proper way to achieve this?
Thanks a lot.
A clean work can be made by making the two floating divs with 0 margin and 0 border, just width at 50%.
Then inside each you can put a div that fits its container, with static margin and padding.
As alternative, you can keep everything dynamic, so put something like margin:1%, you'll get a nice behavior in window resizing!
From https://developer.mozilla.org/En/CSS/Box-sizing
/* support Firefox, Safari/WebKit, Opera and IE8+ */
.example {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
you can use box-sizing: border-box so that the 50% then applies to the inner+padding+border, but sadly no setting to add the margin.
You can however use a div inside a div and use padding on the outer div to mimic the margin.
here's an example JSFiddle