Is there a way to have the padding on an element be added to the min-height value instead of being included in it? For example you have 10px of padding on the top and bottom a element and a min-height of 150px the height should be 170px instead of the element's height being 130px + 20px of padding.
I'm currently building a site using Material Design Lite and it adds padding to almost everything so it's a bit of a pain to have to always find the padding on something when you want to set a min-height value.
I might be a little late, but setting box-sizing: content-box; on the element would solve the issue.
Related
I'm using Cleanslate to reset all the CSS attributes on my widget container and its children, and I'm trying to add box-sizing: border-box to all of my elements, but it's not behaving as expected.
The anchor element (set to display: inline-block) with 100% width doesn't subtract its padding/margin from the width. I have a Codepen that shows the behavior I'm seeing here: http://codepen.io/anon/pen/dXarGy.
Could someone please help me figure out what's going on here? I'm not all that great with CSS. Thanks in advance!
boder-box isn't supposed to subtract margin.
w3schools:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin
So it seems like your example is working as expected as you are setting a margin:
margin: 12px 20px !important;
that is added to your width: 100%;
Also see this article about box-sizing.
I'm getting strange behaviour from margins. A vertical scrollbar appears even though I'm no where near the bottom. I assume this is the desired behaviour, considering that I tested this and got the same results in the latest versions of Chrome, IE11 and Firefox.
The following code results in a scrollbar
<html>
<head>
<style>
body {
margin: 0;
height: 100%;
padding: 1px;
}
div {
margin: 15px;
}
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>
Changing the body's padding to 0.1px results in no margin.
Changing the body's padding to 0px also results in a margin.
Also, adding box-sizing: border-box to the body removes the scrollbar as long as the padding is not zero.
I haven't added a Fiddle because I can't replicate it there. You need to test this in a simple html file.
Is this actually the expected behaviour? Is there a logical explanation why they implemented it like this?
Looks like the reason you're seeing the scrollbar is a combination of defining a height and setting a padding value. The height property dictates the height of an element's content, excluding the margin and padding added onto that value. The scrollbar appears after adding padding because you've set the content of the element's height to 100% of the page, plus the padding, causing the element's entire height to overflow.
Additionally, applying box-sizing to an element makes the height and width properties include padding in the value. Funny thing is, it doesn't include margin. So if you were to apply:
body {
box-sizing: border-box,
margin: 1px,
padding: 0
}
You'd still see the scrollbar. Once understanding that an element's height property, by default, only dictates the height of the content within the element, it makes a little more sense.
Hope this helps :)
Setting the height of the body to 100% makes it take all of the height of it's parent element which is the html element. The html element's width and height in turn are governed by the window it is in. Adding a margin or a border would increase the dimensions beyond the available space thus inducing the scroll.
However, the other issue is that adding the margin to the div is pushing the body down by 15px. This has to do with collapsing margins.
Check out https://stackoverflow.com/a/2680515/6184852 for further information.
which is causing things to look sloppy.
There is a div which expand to 100%, but the right border is cut off.
See the dev site here - it is under Feed
https://frozen-dusk-2587.herokuapp.com/
Here in image of me toggling the border using Chrome Dev Tools:
and here it is with me toggling on the border:
This is the default behaviour for all box-sizing:content-box elements, which is the default value for all elements. add box-sizing:border-box; to #at_view. This causes the browser to include border and padding in relative width calculations.
If you define an element with a width of 100% and also a border, the border is added to the 100% so this makes the total width more than 100% which is causing your problem (read up on the css box-model: http://www.w3schools.com/css/css_boxmodel.asp).
So one solution is that you could change the width of #at_view to less than 100%, try 90-95% - until things look right.
Or to be very specific, you can define #at_view width as 100% and subtract the border using calc():
#at_view {
width: calc(100% - 20px);
}
(Subtracting 20px, since it looks like 20px is the width being added by the border, as the border is 10px --> 10px on the left + 10px on the right = 20px.)
Even such basic things as the box model can be modified using CSS Rules.
See
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
to change the default behavior of the box model:
#at_view{
box-sizing:border-box;
}
I've been reading on a couple of older resources that the use of max-width and min-width is buggy when combined with box-sizing: border-box. Does anyone else combine max/min-width with box-sizing: border-box and have any issues?
I plan to build a site with * {box-sizing: border-box} set globally for all elements but need to also use max-width but don't want to if it's going to cause issues.
There are no issues that I'm aware of. Bear in mind though that when border-box is used, padding and border heights and widths are effectively consumed by the total height and width of the element. With this, for instance, specifying both a max-height of 100px and padding-bottom of 100px will make your element exactly 100px in height; not 200px. If you wanted 100px height and 100px bottom padding, you'd need to give your element a max-height of 200px.
Here is a JSFiddle example using border-bottom to illustrate the difference.
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.