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.
Related
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.
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.
Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
Here's a screen shot to illustrate what I currently have:
The CSS property you are looking for is padding.
The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding.
So your CSS would look like this:
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
#text {
padding: 10px;
}
Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/
Just use div { padding: 20px; } and substract 40px from your original div width.
Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizing is for Firefox.
Padding is a way to add kind of a margin inside the Div.
Just Use
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
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.
I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):
newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}
When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.
Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.
How can I fix this problem?
Add property:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Note: This won't work in Internet Explorer below version 8.
Put a div in your newdiv with width: auto and margin-left: 20px
Remove the padding from newdiv.
The W3 Box model page has good info.
Try this
box-sizing: border-box;
If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.
.indent {
text-indent: 1em;
}
.border {
border-style: solid;
}
<div class="border">
Non indented
</div>
<br>
<div class="border indent">
Indented
</div>
simply add box-sizing: border-box;
A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.
By default, every element box-sizing parameter is set to content-box.
Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.
* {
box-sizing: border-box
}
This tells the browser to account for any border and padding in the values you specify for an element's width and height.
So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).
Hope that helps. You read more on css box-sizing
when I add the padding-left property,
the width of the DIV changes to 220px
Yes, that is exactly according to the standards. That's how it's supposed to work.
Let's say I create another DIV named
anotherdiv exactly the same as newdiv,
and put it inside of newdiv but newdiv
has no padding and anotherdiv has
padding-left: 20px. I get the same
thing, newdiv's width will be 220px;
No, newdiv will remain 200px wide.
This would work in all cases, with this the extra padding included in predefined width
box-sizing: border-box;
just change your div width to 160px
if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.