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
Related
In CSS code,
we use
#testing{
margin: 0;
padding: 0;
}
i use RECESS to code qualify my css file
it suggest me to use padding first and margin after
#testing{
padding: 0;
margin: 0;
}
My question is, does the order of padding and margin important in css quality?
And what's the different between padding first and margin first?
EDIT
just wondering why it suggest the order for me
My question is, does the order of padding and margin important in css quality?
I consider the reason is "coding style".
In order to readability, consistency, manage, picky...
You can also order by a-z, type, css3 last...etc.
And what's the different between padding first and margin first?
Looks.
Example:
WordPress CSS Coding Standards
Google HTML/CSS Style Guide
Margin is applied to the outside of you element hence effecting how far your element is away from other elements.
Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.
Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content from top to bottom.
i.e. immediately on top content it takes padding value, border and finally on top of everything margin would come.
Margin,padding and border values should be deducted from the width before assigning the width value in css. For example width: 100px, padding: 10px, margin: 10px, border: 5px means width of the total container is 150px(100px+20px (left and right padding each 10px) + 10px (left and right border 5px each) + 20px (left and right margin)).
order of giving padding and margin values doesn't make any difference. we can write in any order in css.
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'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.
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