I read articles about Margin and padding. I understood that "Margin is space outside the border where as padding is used inside the border".
Below is the Box Model that explains about it. My Query is regarding application of this information.
While designing website, I am not using borders anywhere. It means, I use margin and padding to resolve the same problem. So, In this situation. How should I chose, whether do I use margin or padding. Are there any dependencies with anyone ?
So, When border is invisible, How margin and padding can be used for different purposes. Can anyone explain different situations where we need to use only one and not the other.
If you know for certain that you will never ever have borders on anything, then you could user either margin or padding to create space around your elements.
The key thing to be aware of though is that, if you use only padding, the outermost edges of an element will always be touching other element(s).
This means that if you use techniques to change the position of elements slightly, eg. relative positioning, floating, negative margins etc. the elements may actually overlap.
It will be even more obvious when your elements have different background colors.
I would recommend using margin and padding both. Margin to create the actual space between elements, and padding when you need to create space from the edge of the element itself.
even if youre not using any border, but margin and padding is different, you can see this article, try using background-color
Related
MDN says:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
I don't understand the last sentence. Why does the collapsed margin end up outside the parent? If it ends up outside the parent, where will it go? I have searched the web and read several tutorials about margin collapsing, but I didn't find anything about this.
I threw together this little demo to help demonstrate the way this works:
http://jsfiddle.net/9pq8bm0o/
As you can see, I've made three elements, all nested within each other. The 2 inner containers both have a top margin value of 20px, and the outermost container has a top border (one of the things that is considered a margin separator).
So what does this mean?
Because there is no separation at the top of the two child elements, there is only 20px of space in between the outermost container and BOTH of the two child elements... the inner-most child has had it's margin collapse. Conversely, that margin that is there exists within the outermost container simply because of that border.. if you remove the border, all three elements will share the same 20px of margin which will be outside of all three containers.
So why is it like this?
The best way to think about margin collapsing is like this:
Asking for a margin on an element will ensure that it has that much margin at it's top, and nothing more (unless it's forced to have more).. So looking at my example, Does the middle .parent element have 20px of space above it? Yes, it does. Does the innermost child .child have 20px of space above it? Yes, it also does... so the margin rule is being applied correctly. It doesn't matter where that space lives, as long as it is there.
Imagine that there was a border around the .parent element, but the margin was still displayed the way it is without, and then ask those same questions.. Does the .parent element have the space? Yes, but does the .child element? No, it no longer would, because there would not be 20px of space in between it and the border that is now sitting above it... So, in reality, the space does not collapse, so that both of those questions can be answered as a "yes".
I hope that helps.. it's a little less of a direct answer to your question, and more of the theory behind how it works, so to put things a bit more plainly:
tl;dr
Margin, unlike padding, is meant to add space outside of elements. Because of this, margin will always collapse to the highest parent element whenever possible, to ensure that space is always "outside". Because it is outside of the element, it can count towards multiple different elements, as they all share that "outside" space.
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
As I am sensitive to sensory overloads and get confused with too many visual details, I would like to simplify my palette of CSS features to a managable toolkit but without really compromising too much of the aesthetic appeal. In light of that, I seem to be hopelessly lost balancing between margin and padding of my HTML elements.
So I am contemplating to stop using margin altogether in favor of padding. To me, who is not a visual/HTML expert by any means (I am more of a backend programmer by experience), it seems doable, however, I am sure there is a reason the distinction exists.
By this post, I am asking gurus to please explain the cons of using and not using both margin and padding and whether reasonably elegant design can be accomplished by using only one of the two. It would also be great if someone could submit examples to illustrate something that can be accomplished with one and not the other.
No not in every aspect.
Margin and padding are two completely different things. Padding will add to the overall size of the objects width or height whereas margin will not.
Imagine you have a set of links that are floated left. Just using padding on the links will cause the anchor element to be very big and quite possibly not what you would want. Whereas using a little padding and also a margin to increase the space between the anchors would be more suited.
Using margin ensures that something is so far from something else.
Using padding ensures that the content of something is so far from its own edge.
If you had a layout of boxes on a page and you wanted to have spacing between each box and also a border, using padding alone would not suffice so you would have to use margin as well.
As a general rule use each when it is needed. I know what you mean about things getting messy in your css but there are ways to simplify things. For a simple site I have done the following before.
css
.leftMargin {margin-left: 10px;}
.rightMargin {margin-right: 10px;}
.topMargin {margin-top: 10px;}
.bottomMargin {margin-bottom: 10px;}
.leftPadding {padding-left: 10px;}
.rightPadding {padding-right: 10px;}
.topPadding {padding-top: 10px;}
.bottomPadding {padding-bottom: 10px;}
Then you can easily set universal padding and margin rules without too much bother. But then again you could argue that this creates unmanageable html markup.
It is really something that you have to work out for yourself. Something to consider though is using only margins can have very undesirable affects! More to the point of collapsing margins Why does this CSS margin-top style not work?.
Hope this helped.
Well I would say that you cannot avoid using margin and that they have different uses.
Padding should be used to create space between the edge of your element and the content whereas Margin should be used to separate elements.
If you never use borders then arguably you could do away with 1 of them but if for instance you have 2 divs next to each other, both with borders but you don't want them touching, how do you plan on separating them? It is possible to position them but often margins are the best way.
Also consider that the total element width is width + padding whereas you could argue the margin size is 'outside' the element although still technically part of it.
I have a lot of style markup and use padding and margin equally
The simplest example I could make, to show you the differences between both concepts is this one.
Notice that margin is the space between the border (red color) and the surroundings, while padding is the space between the contents (in the example is the text) and the border.
Usually you will need to use both of them. However in the few cases when you don't need to use a border at all, you can manage pretty well by just setting one of them.
No, not if you want to do complex designs
The holy grail of web design uses a combination of margin and padding
Even though margin and padding can at times do similar things, the purpose of each is different.
margin refers to the space required on the side of an element relative to other elements
padding refers to space between the content of the element and its border
The power having margin and padding is realized when you use both together.
As you may know, elements that contain floating elements won't stretch around their child elements unless you either add clear elements after them or set the parent's overflow to hidden. See example.
My question is, are there any real life scenarios in which one would want to not stretch the parent element around it's children, as in the "Overflow visible" box in the above example?
Interesting thought, but I doubt anyone would want that as first, you can just do a border + padding to reproduce that scenario, and second, the clear thing is actually thought of as a bug/something that isn't the right behavior.
In the real world, if you didn't know any better, you can settle with that "solution" where a box was there that didn't have any height and the element they're containing is showing outside of it, but since you know better, it is better to just do it correctly, meaning, clearing the div, using absolute positioning, or using borders and padding to achieve the same effect.
EDIT
It is not actually a bug but it was the "right" behavior because if float containers cleared themselves, it would propose a much harder problem as discussed in this page: http://css-tricks.com/all-about-floats/
http://www.wilwaldon.com/crossing/page3.html
If you look at the page in IE7 there is an ungodly amount of space between the top paragraph and the bottom spotlight area. It works fine in all other browsers.
If you know of any tricks or hacks to prevent this I'd greatly appreciate this :)
Thank you!
The reason you're getting all that space is because of all the top padding and margin you put on the #spotlight yourself. You seem to be adding all that space as a way of making enough room for the floats inside it. Don't do that. Make the div contain its floats by adding overflow: hidden to it. If that has unwanted side-effects, add the clearfix class to it, which is already in your CSS.
The reason you're seeing all that space in IE7 is because the #spotlight has a width, which is triggering layout. That causes it to contain its floats already, pushing all that top margin and padding up above it.
Oh, and don't use multiple id="spotlightbox". That's what classes are for. IDs must be unique. Use class="spotlightbox" instead.
if you set display:inline on your spotlight div it should render better in IE7...but that will break other browsers - so use the conditional css - or rewrite your style to be more compliant