This question already has answers here:
Why does CSS padding increase size of element?
(6 answers)
Closed 7 years ago.
I have a div that's 500px in width, and 500px in height. The max-width and max-height are also set to 500px. I'm trying to make the padding-left of the div to be 100px so I can move the word "Hello" 100px from the left without increasing the overall width of the div. When I set the padding-left to 100px, the overall width of my div increased to 600px, even though I set the max-width of the div to be only 500px. Is there a way for me to move the word "Hello" 100px from the left without having the width of the div being increased, or wrapping another element around the word "Hello"?
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
}
<div>
Hello
</div>
You need to adjust your box model. Put this in your CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Paul Irish explains how the box model works and why we have to define it this way.
Essentially, when we use padding it adds itself to the value of the inner width/height. By adjusting your box-sizing to border-box you're saying that if your box is 500px wide, and you apply padding-left: 100px, it will simulate the box being only 400px to compensate for the padding - to give a total of 500px.
Browser support is universal at this point, and it performs well (despite the use of the * selector, which has as much of an impact as use HTML tags like h1 and p in CSS).
UPDATE: Note that the CSS above affects all elements that use the box-model. Whenever I update one box-model on a stylesheet, I update them all to prevent overlooking this detail later in the game when I am attempting to maintain continuity.
You can try using box-sizing: border-box, so as to force the declared height to take into account your padding(s).
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
box-sizing: border-box;
}
<div>
Hello
</div>
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
.div1 {
width: 200px;
height: 100px;
padding: 25px;
border: 10px solid blue;
box-sizing: border-box;
}
<div>
<div class="div1">
</div>
</div>
This is what i got in the browser
can someone explain why the border is 9.998px instead of 10px?
Also when i added up all the border and padding, it was not exactly to 200px.
Does this have anything do with the browser's default styles?
By default the width and height property just sets the width or the height of the content area, that is without padding and border, if you want to include them you need to set the property box-sizing to border-box.
You can do it in your body like this:
body {
box-sizing: border-box;
}
About the border not beign exactly 10px it may be an issue with rounding or something, I tested it in Firefox and Edge and it gives me 10px, check if the zoom of your browser is set to 100%.
In snippet below padding-top overrides the height and max-height properties of container:
I want this <div> to be 10px high, but its 100px because of padding-top
as far as I understand this should be solved by box-sizing: border-box but this doesn't help
w3schools - border-box: the width and height properties (and min/max properties)
includes content, padding and border, but not the margin
.padding-test {
background: linear-gradient(109deg, #3adffd, #00abfb);
outline: 1px solid #3b3c6d;
width: 100%;
padding-top: 100px;
max-height: 10px;
height: 10px;
box-sizing: border-box;
}
<div class='padding-test'></div>
Can someone explain why is this happening and how to fix this?
Same happens for width and padding-left
UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?
I had run into the same doubt. According to MDN:
border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.
And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:
.padding-test {
height: 10px;
box-sizing: border-box;
overflow: hidden;
}
.padding-test::before {
height: 100px;
content: '';
display: block;
}
So I'm trying to create an A4 page. Let's just say the margin of the page is 50px for now. The whole document (A4) is 300x300 pixels in my example:
https://jsfiddle.net/pfs01ucw/
What I get is this:
What I want is something like this:
I simply want to set a fixed container's width and height, add some margin and make the wrapper inside fill the entire space. If I add padding: 50px to the #container DIV, the height and size will increase by 50px on all sides (basically making it 400x400 pixels instead).
How do I achieve this?
box-sizing: border-box;
The width and height properties include the content, 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 that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.
MDN - box-sizing - CSS
Fiddle
<div id="container">
<div id="wrapper">
</div>
</div>
<style>
#container {
border: 1px solid #000;
height: 300px;
padding: 50px;
width: 300px;
}
#wrapper {
border: 4px solid #000;
height: 100%;
}</style>
I have a CSS question you may be able to help with.
I'm trying to build a website with a 'Fluid' layout.
All website content will be contained within a wrapper div
When the screen shirks, I Would like the wrapper div to shirk along with it's content.
However, when the screen size is increased, I would like the wrapper div to maintain a max size. The aim is to prevent images scaling beyond their native resolution and the formatting of text changing (a paragraph may become a single line on very large screen)
Can I apply a max pixel with and a percentage to the wrapper DIV? is there a better way to achieve the goal?
.wrapper {
margin: 0 auto;
max-width: 800px;
width: 80%;
background-color: #ffffff;
border: 1px solid;
height: 1000px;
}
Many thanks,
P
Yes, you can do this and it is a good practice.
Can I apply a max pixel with and a percentage to the wrapper DIV?
YES, you can apply it
.wrapper {
margin: 0 auto;
max-width: 800px;
width: 80%;
background-color: #ffffff;
border: 1px solid;
height: 1000px;
}
the width: 80%; means 80% of the screen width(or browser window) and it will not exceed max-width: 800px;
The max-width property in CSS is used to set the maximum width of a
specified element. The max-width property overrides the width
property, but min-width will always override max-width whether
followed before or after width in your declaration.
In designing a fluid layout, how do you use borders without ruining the layout.
More specifically, I have a HTML widget which consists of five divs. I would like the five divs to take up all the room in the containing element. I would also like to have a 1px border around each.
I tried:
.box { float: left; height: 100%; width: 100%; border: 1px solid red; }
This doesn't work: there will be an extra 10px in width causing the boxes to wrap. Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.
Whats the proper way to manage the interaction between these elements?
See this article.
Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).
In CSS3, you can switch to a different box model as follows:
box-sizing: border-box;
Browser-specific implementations of this are:
-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8
This will cause the box sizes to include the element's border and padding. So you can now specify
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width:20%;
border:1px solid red;
float:left
}
and have the five divs take up all the width of the containing element without wrapping.
Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.
Only put width: 100% on the outermost div, and don't put a border on it. If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.
If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):
<div class="one">
<div class="two">
<div class="three">
etc.
</div>
</div>
</div>
<style>
.one {
width: 100%;
}
.two {
border: 1px solid red;
padding: 1px;
background: red;
}
.three {
border: 1px solid red;
background: white;
}
</style>
As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).
Oh boy, I almost hate to mention this, but there is a very easy way to do this in a horizontal bar. It isn't "pixel perfect" except at your minimum width, but is not discernible to the naked eye.
Divide the container div by the number of items. Let's say, you have six nav items with a white border (this is especially good for numbers that don't divide into 100 because it won't be perfect in any case).
Set your total width for each left-floated child div to the correct fraction (using % for left or right margin or padding) so that they equal # 100%. Go ahead and put a 1px border-right on the child divs. For the last div at the right end, either make a second class with no border or just use style='border:none'.
Then, at your minimum width, slowly drop the width of each child div until they fit.
Here is a bit of code from an old page of mine using this method for a liquid page with minimum width of 960px (958 px and a 1px border on each side):
.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}
I think it actually is as close to pixel perfect as you can get at minimum width, and at higher widths although the right-hand div is maybe 4 px wider than the others, you can't tell by looking at it. (Obviously, this wouldn't work if you need a right border on the right-most div, since you'd see a few pixels of background.)
This will get you fairly close but not 100% of the way (pun intended). To give an element 100% height it needs to know "100% of what?". All parent elements must also be given 100% height and this includes the body. Or as the W3C put it: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'." As you can see we also need to give the body "position: absolute;" for the height to be honored. This example also divides the width into five equal columns with borders (and some padding and margin just for fun):
<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
div.column {
height: 100%;
border: 1px solid blue;
margin: 1em;
padding: 2em;
}
</style>
<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>
As you can see when you test it we have no problem with the witdh. This is because the "sections" that divide the width have no padding, margin or borders. Thus the width we set will be the width they occupy on screen. Now, this is not strictly true in practice. I have actually set the widths 19.95% and not the expected 20%. Problem is that some browsers (IE for one) have a rounding error when adding up percentages and the more subdivisions to add up the greater the error.
Where this method obviously fails is when it comes to the height. Unlike "width: auto;", which will make the div occupy the available horizontal space, "height: auto;" will only make the div as tall as its content. You have to specify "height: 100%;" to get the div to fill the height of the window but alas, when adding margin, padding and borders, the rendered height of the div becomes greater than the viewport, resulting in a vertical scrollbar.
Here I can only really see two choices; Either 1) accept that the divs don't quite fill the window height and set their height to maybe 80% or 2) Skip the bottom border and set the body to "overflow: hidden;", which will crop off the parts of the divs that protrude beyond the edge of the window.
Finally, of course you could also make use of some simple scripting to achieve what you're after. Shouldn't be very complicated at all - but that's a question with another tag... Happy coding!