Unless I completely do not understand the box-sizing property... why aren't those two DIVs next to each other?
http://jsfiddle.net/MK7Fs/
With box-sizing: border-box; shouldn't the padding, margin, and border "cut in" to the 50% width and ultimately end up with 100% width and with enough room to fit both DIVs?
Margin is not added in when using box-sizing : border-box. If you remove the left/right margins your boxes line-up on the same line.
I also noticed your <div> elements have white-space between the first one's closing tag and the second's one opening tag. When using display : inline-block this will add space between the elements and they won't line up on the same line.
Demo: http://jsfiddle.net/MK7Fs/1/
box-sizing Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Some reading on the space between display : inline-block elements: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
As Jasper said, margin is not added when using box-sizing: border-box. This day and age, however, we've got a new tool in our toolbox: calc.
You can give the boxes width: calc( 50% - 40px ); (assuming you've got a total of 40px of margin).
Demo: https://jsfiddle.net/htwj/yzh7zg25/
You're misunderstanding how border-box works. The box-sizing property will at most constrain the padding and border boxes of an element to its contents width & height.
The definition of the border-box value as stated in the Basic UI Module:
Any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
Related
How to remove the nest paddings to get exactly height and width in a div that contains others div inside. I'm using Tailwind and this UI.
daisyUI
The margin top and margin bottom doesn't fit. Even if I use the vh or/and wh units, and other tips.
If you could elaborate what you are looking for, that will be great! You can start with using this * symbol for removing inbuilt margin and padding in elements in your stylesheets.
*{
margin:0
padding:0
}
This should remove any padding or margins for all elements including the nested elements and you will get their exact height and width. The height will be the font-size and width will be the screen size without any margin or padding.
Let's say the width of the containing box is 5cm, padding(all sides) is 2cm.
if I set the width of the content to be 50%. Now the absolute value of the width would be 2.5 cm. But if the padding effect is still there, then the box now would be 2+2.5+2 = 6.5cm. But the content would no longer be 50% of width now(2.5/6.5 != 50%).
I'm kinda confused,any help? Thanks!
Look into the Box Model to understand how this currently works.
It does vary significantly between some browsers (especially older ones).
Not as big a problem as it used to be, but the solution to use box-sizing may not be a universal fix depending on your users (any hold-outs still on IE >8?).
As stated by others you can use the box-sizing property to fit either to the content alone, content with padding, or the entire box w/padding & border (which is probably what you want).
The result is correct. To simplify these calculations you could use box-sizing: border-box to include padding in total width.
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer
when the document is in Quirks mode. Note: Padding & border will be
inside of the box e.g. IF .box {width: 350px}; THEN you apply {border:
10px solid black;} RESULT {rendered in the browser} .box {width:
350px;}
Reference: MDN - box-sizing
This is a common problem devs come across.
If I have:
<div style="width: 200px"></div>
Then the width will be 200px wide.
If I add 10px padding, then I need to deduct 20px total from the width.
So to keep it 200px wide it must now be:
<div style="width: 180px; padding: 10px"></div>
It is possible to override this so the width doesn't need to be adjusted according to padding, but I feel you should stay true to CSS's intended way of working.
With does not override padding, the padding is added to the width.
Think of padding as extra width but outside of the element.
The width will not override the padding but the padding will still be
there so other elements will be pushed away from their position (if
relative).
Edit: Confused padding with margin.
Please see example at
http://jsfiddle.net/cne94hw4/
.a{
width: 100%;
background-color: #eee;
margin-left: 200px;
}
I was expecting "width 100%" will mean 100% of the windows, but clearly it's not when I add a margin to it. I found this is difficult to understand.
What's the exact relationship of the box and the margin? It's there any written rule for this?
Your question is about the CSS Box model, which is described in detail at the CSS specification: http://www.w3.org/TR/CSS2/box.html
In brief, the width defines the width of the content box. If you add padding, borders
and margins, then the overall width of the block box is the width of the content box plus
any widths due to padding, borders and margins.
As for the height, padding and border widths are added to the overall heigth of the
block. Margins, though, can collapse with the margins of adjacent blocks, which is
another topic to look at (see: collapsing margins).
Another concept is the block formatting context, which comes into play if you
deal with elements that may be floated or positioned.
In your example, the overall width of the a element is 100% plus 200px due to the
left margin.
Finally, you can have some control over how the width is computed by using the box-sizing property.
width: 100%' does mean100%` of the document your example, but you also set a margin, which is what's limiting the width of the element. See what happens when you remove it.
try the following
.class{
width:100%;
padding-left:200px;
box-sizing:border-box;
}
margin adds extra space out of the box.
It seems that when I have a table inside a div and I set the table to 100% width and give it some margin, it seems to disregard the rightside margin. Here is the fiddle for it:
http://jsfiddle.net/gFQGb/
The width applies to the actual content of the element, so you have a table with 100% wide content, and on top of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper <div> with just the margin.
just add padding: 10px; to the .inner class and remove margin from the table.
Here is the demo
That's how the CSS default box model works: width of the element (defined via width: x) + borders + margins + padding = total amount of space it takes up.
http://css-tricks.com/the-css-box-model/
You can change the box-model by using box-sizing: border-box, which will cause the width: 100% to include your paddings/borders.
http://css-tricks.com/box-sizing/
I have an element within another element. The parent is of a certain size. I want the child to be the exact same size, but at the same time have a padding.
If I don't know the exact size of the parent, is there any way to get it to be the same size as the parent and have a padding?
problem:
http://jsbin.com/odemu3/edit
Thanks.
On supported browsers, set box-sizing to border-box (CSS3 only). This causes the browser to calculate the width of an element as content + padding + border + margin (as opposed to content-box in the CSS1/2 box model):
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I believe inputs already have this setting by default, but this can also apply to any other child elements whose widths you want calculated like that.
Make the child element display:block (which will cause it to fill the width of the parent) and either give the parent padding or give the child a margin. Do not try to specify a width on the child element.
Unfortunately, no. Width calculations are done before any padding/margins are taken into account, so a child with width 100% will be 100% of the parent's, after which margins/padding are added, so you'll end up with something over 100%.
You can fake the effect by putting on a border of the same color as the background. This would work, since you've got a solid background for the child to span over.
Not a perfect solution but it worked
Remove left and right padding padding:20px 0; and set text-indent:20px; on input
http://jsbin.com/aleta4/2/edit
block-sizing: border-box didn't work for my particular problem but there is another way for those coming back to this question:
use position: absolute along with right:0 (or bottom for vertical constraints) to constrain the child to the parent. The parent element should have position: relative and it is forced to fit perfectly.