I'm not saying that I'm lazy to do math, but is there a better way to perform this task:
I have a page that with width: 960px, inside it has 2 divs that are width: 50%. That's quite simple, but if I want to add 1px border I have to calculate 960/0.5 minus the extra pixels of the borders, they should be 4px but strangely they are counted as 2px (left and right side of 2 divs right?). Also, when I add margin and padding I have to calculate everything again. Lets say I add 10px margin, I have to convert the % to px and sometimes it gives me annoying numbers like 760.25px. I would like to know if you are using a better approach or if its unnecessary to do it like this. Thanks.
If you use fixed width of the container, why would you use % for inner DIV's. It does not make any sense unless you use percents. Sure you can use box-sizing, but it will hurt older browsers.
You can add more elements for sizing:
<div style="width:960px;overflow:hidden;">
<div style="float:left;width:50%;">
<div style="margin:5px;border:1px solid #000;padding:5px;"></div>
</div>
<div style="float:left;width:50%;">
<div style="margin:5px;border:1px solid #000;padding:5px;"></div>
</div>
</div>
You can use percentages for element with no margin, border or padding, and you can use margin, border and padding on the elements inside that has auto width.
box-sizing CSS property (if you dont care about IE<8)
If your "divs" have a background image, you can hack by integrate the border in the background image.
But if your "divs" have a fixed width, you should calculate width in order to have no surprises with other web-browsers.
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.
When we use border it apply outside of element. If I create div of 100px width and add 10px border than its overall with will be 120px and that's why layout will be not good since this extra unwanted width due to width cause problem in float and fluid layout
to solve this problem If I want to create 100px div with 10px border I create div of 80px and than 10px border so its total width will be 100 however its not I want since if I just want to change size in border or div I need to change both
it there any way I can create div 100 px and apply 10px border and overall width will be 100px ?
There is. You can use box-sizing: border-box on the element and the width (and height) will be calculated the way IE did it in quirksmode.
It can be extremely useful sometimes, but imo it's good to learn how the normal box model works and get used to working with it first.
Fwiw I've built a site using box-sizing: border-box as default on all elements and I would actually not recommend it. Partly because I'm really used to the normal box-model but mostly because there are still bugs with box-sizing in some browser (FF and percentages I remember messing up).
Edit: Note that it doesn't work in IE<8.
Edit2: More here: http://paulirish.com/2012/box-sizing-border-box-ftw/
This is classically solved this way with a CSS2 / IE5,5/6 compat solution by putting two divs inside each other:
<div class="size">
<div class="border">
Give me some border ;)
</div>
</div>
In the CSS you make use of the size-div to set the size and the border-div to set the border:
.size {width:200px; height:200px;}
.border {border:10px solid blue;}
So even if you only know the standard box-model you can solve this.
See http://jsfiddle.net/6K2vS/ for an online demo of this.
In some really old browsers you sometimes even need to set a zero-width border to the outer element to have this working. Just noting if you look for some backwards compatible solution.
The following example is identical in almost all browsers including IE6:
http://jsbin.com/adica3
#one {border : 1px solid red;padding:20px}
#two {border : 1px solid yellow}
p {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin: 20px}
</style>
</head>
<body>
<div id="one">
<p class="marg">Padding to div</p>
</div>
<div id="two">
<p class="padd">margin tp P</p>
</div>
But when I give width to div then second div becomes shorter then first div.
How we should decide which is appropriate?
What browser compatibility issues should I know about?
Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.
If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.
If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.
If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.
IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.
Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.
I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_3?ie=UTF8&s=books&qid=1263529151&sr=8-3
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_13?ie=UTF8&s=books&qid=1263529151&sr=8-13
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_12?ie=UTF8&s=books&qid=1263529151&sr=8-12
Those would probably answer a lot of your questions...
I'd make the decision based on what's going to be inside your tags.
For example, is the <p> the only thing that's going to appear inside your div? If so, then it probably doesn't matter.
If there are other elements that will be inside the div, do you want padding around them or not?
As for the modified width, that will probably be due to the different boxing models between browsers.
i think the easy way is thinking the border of the element.
margin spaces outside border, while padding inside.
Of course, there are some browser related issue made them difference in some way, but i suggest stay with my suggestion and find work around on those special browsers.
i totally understand the box model. this question is more about trying to pin down a semantic methodology regarding when to use margins and when to use padding.
here is a typical example,
first, in plain English:
situation: we have a container div, inside of which there is a paragraph element.
goal: to have a 12px space between the inside of the div and the outside of the paragraph.
option a) apply 12px of padding to the container div
option b) apply 12px margins to the paragraph element
or, if you prefer, HTML:
<div id="container">
<p>Hello World!</p>
</div>
and, CSS:
option a)
div#container {padding: 12px;}
option b)
p {margin: 12px;}
Cheers!
Jon
Paddings and margins gives the same effect, Except in the following cases (I might miss some):
You have some kind of background properties. Margins won't get them.
You have a border
You use TD (no margins)
Two nested items, The margins are collapsed together, where paddings not.
(need to check this one) They probably affect the width and height of the element differently. (If some one knows better, pls edit this).
Personally, I prefer option A. Why? Say now I have to add other HTML elements into the div and I want the padding to be maintained, I would not have to add other rules to my CSS files to get it working.
This is a bug in css,
here are examples:
http://creexe.zxq.net/div-issue-padding.html = padding issue
http://creexe.zxq.net/div-issue-margin.html = margin issue
the red and green div tags in the examples were created by the css property TOP,but it has its own disadvantages athat TOP,BOTTOM etc works only when the position of the div tag is Absolute and relative, but not static
It depends on what you're trying to accomplish visually. Would container have other child elements which might hang over into the gutter on either side of the paragraph? If so, a margin makes more sense. But if container should have a 12-pixel gutter for all elements, period, it makes the most sense to use the padding to avoid having to apply margins to multiple element sets.
Generally speaking you always want paragraphs to have vertical margins to ensure consistent paragraph leading.
Personally, I'd go with option a of #container {padding: 12px;} because it makes amply clear that all child elements must stay 12px away from the border of this div.
If I want other elements to stay more than 12px away from the #container's border, then I apply as much more margin to that element.
Cheers!
Vertical padding on the division - because if I decided I wanted a different amount of vertical space in between the multiple paragraphs I'd use bottom margins, and the top/bottom padding of the enclosing division pretty much will always stay intact assuming you just have staticly positioned elements inside.
The difference is where the border sits.
The border sits SMACK DAB in the middle of the margins and padding. If you specify margins, that is white space OUTSIDE the border.
If you specify padding, that is white space INSIDE the border (pushes the border further out from the element)
Can't show you here due to css stripping, but try this out:
<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
i have margins, padding and a border.
</p>
<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
i have margins, and a border.
</p>
<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
i have padding and a border.
</p>
</body>
other stuff!
padding brings in background color of the element, margins are basically transparent
some elements ( like td ) seem to ignore margins, while they respond to changes in padding
What is the difference between margin and padding in CSS?
In what kind of situations:
both work.
only margin is appropriate.
only padding is appropriate.
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.
So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em apart.
Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.
This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.
The other two big differences are that padding is included in the click region and background color/image, but not the margin.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Margin is on the outside of block elements while padding is on the inside.
Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.
The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.
The diagram below I think gives an instant visual understanding of the difference.
One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.
There are more technical explanations for your question, but if you want a way to think about margin and padding, this analogy might help.
Imagine block elements as picture frames hanging on a wall:
The photo is the content.
The matting is the padding.
The frame moulding is the border.
The wall is the viewport.
The space between two frames is the margin.
With this in mind, a good rule of thumb is to use margin when you want to space an element in relationship to other elements on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will make the element bigger1.
1 You can alter this behavior with the box-sizing attribute.
MARGIN vs PADDING :
Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.
Margin is not part of an element where padding is part of element.
Please refer below image extracted from Margin Vs Padding - CSS Properties
From https://www.w3schools.com/css/css_boxmodel.asp
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Live example (play around by changing the values):
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
It's good to know the differences between margin and padding. Here are some differences:
Margin is outer space of an element, while padding is inner space of an element.
Margin is the space outside the border of an element, while padding is the space inside the border of it.
Margin accepts the value of auto: margin: auto, but you can't set padding to auto.
Tip: You can use the trick to make elements centered inside their parents (even vertically). See my other answer for example.
Margin can be set to any number, but padding must be non-negative.
When you style an element, padding will also be affected (e.g. background color), but not margin.
Here is some HTML that demonstrates how padding and margin affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.
$(".outer").click(function(e) {
console.log("outer");
e.stopPropagation();
});
$(".inner").click(function(e) {
console.log("inner");
e.stopPropagation();
});
.outer {
padding: 10px;
background: red;
}
.inner {
margin: 10px;
padding: 10px;
background: blue;
border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
<div class="inner" style="position:relative; height:0px; width:0px">
</div>
</div>
The thing about margins is that you don't need to worry about the element's width.
Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.
So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.
Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.
The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.
it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.
note that some times you have to use margin.
One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.
Advanced Margin versus Padding Explained
It is inappropriate to use padding to space content in an element; you must utilize margin on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin which works perfectly in Internet Explorer 4.
There are two exceptions when using padding is appropriate to use:
It is applied to an inline element which can not contain any child elements such as an input element.
You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.
When you have a 100% width element with padding: 50px; you effectively get width: calc(100% + 100px);. Since margin is not added to the width it will not cause unexpected layout problems when you use margin on child elements instead of padding directly on the element.
So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.
First let's look at what are the differences and what each responsibility is:
1) Margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the
border. With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).
2) Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of
an element. With CSS, you have full control over the padding. There
are CSS properties for setting the padding for each side of an element
(top, right, bottom, and left).
So simply Margins are space around elements, while Padding are space around content which are part of the element.
This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.
Also they define each section as below:
Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
Padding - this clears the main content from its containing box.
Border - this surrounds both content and padding.
Margin - this area defines a transparent space that separates it from other elements.
I always use this principle:
This is the box model from the inspect element feature in Firefox. It works like an onion:
Your content is in the middle.
Padding is space between your content and edge of the tag it is
inside.
The border and its specifications
The margin is the space around the tag.
So bigger margins will make more space around the box that contains your content.
Larger padding will increase the space between your content and the box of which it is inside.
Neither of them will increase or decrease the size of the box if it is set to a specific value.
Margin
Margin is usually used to create a space between the element itself and its surround.
for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.
Padding
I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.
So briefly, it's situational; it depends on what you are trying to do.
Margin is outside the box and padding is inside the box