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;
}
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 11 months ago.
I have got the design in Figma. I see that button has height as 40px.
How to set it corectly using padding + height?
If to set height: 40px and add padding it comes to more 40px by height.
Setting box-sizing:border-box; on your button or on all your elements (my advise) with * selector solves your problem.
*{
box-sizing:border-box;
}
button{
height:40px;
padding : 0.5rem;
}
<button>My button</button>
To know more about box-sizing, I really recommend you to read here on MDN. And here is an overview:
box-sizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.
I'm in a confusion since yesterday. Actually I have a markup as follows:
<div class="container">
<div class="child>
<div class="descendant">Content</div>
</div>
</div>
And CSS:
.container {
max-width: 500px;
min-width: 100px;
}
The .container element has some width between 100px to 500px according to my content and the child & descendant elements have some other content without any specific width or min/max-width.
What happens is that when I apply horizontal padding to .container, its content-box size remains as is & just padding is added to it. But whenever I apply horizontal padding to any of the child or descendant elements, they do not add padding to their size or the parent's size. Instead, their content-box size reduces and they accommodate padding.
I seriously can't get what is going on here. Can anyone explain me what's actually happening?
The width describes the content width, which you explicitly set to a maximum of 500px. So long as there is room, the content width of the container will be 500px. If you add padding to the container, that doesn't affect the content width because nothing else constrains it.
The descendants, on the other hand, have their width constrained by the container. If you add padding to a descendants, the width is reduced so the whole box can still fit inside teh container.
This is just normal box model behavior. Adding padding to an element that isn't bound by a parent element restricting it's size will grow outward to accommodate the new padding. But if an element is contained within a parent with a fixed width, and you add padding to the inner element, it can't grow outward and force the bounding parent to grow - it can only reduce it's content-box to make room for the padding.
If you want the outer and inner divs to behave consistently, you can add box-sizing: border-box; to .container and the padding will not cause the element to grow beyond the specified width/height.
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.
Previously my assumption about width: auto was that the width is set to that of the contents. Now I see that it takes the full width of the parent.
Can anyone please describe the differences between these?
Width auto
The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.
Width 100%
On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.
To visualise the difference see this picture:
Source
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent. This typically causes problems.
Width 100% :
It will make content width 100%. margin, border, padding will be added to this width and element will overflow if any of these added.
Width auto :
It will fit the element in available space including margin, border and padding. space remaining after adjusting margin + padding + border will be available width/ height.
Width 100% + box-sizing: border box :
It will also fits the element in available space including border, padding (margin will make it overflow the container).
It's about margins and border. If you use width: auto, then add border, your div won't become bigger than its container. On the other hand, if you use width: 100% and some border, the element's width will be 100% + border or margin. For more info see this.
As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container’s width.
On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.
Source:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
The initial width of a block level element like div or p is auto.
Use width:auto to undo explicitly specified widths.
if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.
When we say
width:auto;
width will never exceed the total width of parent element. Maximum width is it's parent width. Even if we add border, padding and margin, content of element itself will become smaller in order to give space for border, padding and margin. In case if space required for border + padding + margin is greater than total width of parent element then width of content will become zero.
When we say
width:100%;
width of content of element will become 100% of parent element and from now if we add border, padding or margin then it will cause child element to exceed parent element's width and it will starts overflowing out of parent element.
For positioning elements,
width: 100%, not relative to the parent, but the nearest positioned element.
If they are all statically positioned, it is the nearest parent element.
Using width:auto; + display:inline-block; in css giving awesome effect.
width : auto; makes element width auto for adjustment with another object using with display: inline-block; like if we have a div element and another one also div element and div elements are block level element so showing them together in one line use width: auto; and display:inline-block
I'm using box-sizing: border-box to everything on my page. However, when I add padding to the container element in my 960.gs grid, it bumps the second grid to the next line. It does, however work as expected if I add it to individual grid classes.
<header role="banner" id="header">
<div class="container container_12">
<div class="grid_4">
logo here
</div>
<div class="grid_8">
tagline here
</div>
</div> </header>
Adding 10px of padding to .conatiner wraps grid_8 to the next line. Adding 10px to both grid_4 and grid_8 doesn't (box-sizing works). Any help is appreciated.
I believe it is working correctly.
box-sizing: border-box overrides the default behaviour where adding padding and borders to an (non-absolutely sized) element increases that element's total size. With border-box, all elements behave as if they've been absolutely sized with respect to padding: adding padding increases the internal space between the element's borders and its contents, but does not increase the total size of the element.
So what's happening is that by adding padding: 10px to .container, you decrease the amount of horizontal internal space available for .container's contents. And since .container's width does not grow (as specified by the box-sizing rule), and the child elements do not shrink, the second child must wrap, since the combined width of both child elements is now greater than the available internal space of .container.
Adding padding to the .grid_ elements "works" (your definition of "works" assumed to be that .container's children fit in one row and do not wrap) because according to the box-sizing rule, those elements should not gain width in addition to their set width (set by 960 gs) when they are given padding. The result of the added padding is instead to increase the space between the .grid_ elements' borders and their contents ("logo here" / "tagline here"), and to decrease the .grid_ elements' "internal width".
Basically, box-sizing: border-box means that padding (and borders!) gets added internally, rather than externally, and your example demonstrates this behaviour consistently.
Here is more info on box-sizing values, plus some demos.