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.
Related
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.
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.
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 want a div occupying the whole width of the window as well as having some padding or margin or border.
I know i can have it by giving the div a width of say 90% and having padding or margin or border of 5%. This works great but when i to reduce the window size the border or margin or padding starts shrinking. I don't want this.
So my question to the experts that how can i use a fixed padding or margin or border?
In case of narrower windows i'll rather prefer media query to detect the width and then giving another fixed padding or margin or border for a certain width.
Thanks in advance
Rather than percentage width, use width:auto then the div will expand to the width of its container, taking padding and margins into account to make it just wide enough to fit with them.
Then, if your body and html elements have width: 100%, your div with margins and padding should always just fit inside the viewport.