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.
Related
I am imagining there is a good explanation for this but so far it has more annoyed me than helped.
Normalize.css adds 1em margins to elements (and some others). While I see the point from the visual side, it means it often prevents block elements to "touch" each other. I am overriding this at present but would love to understand the reasoning for the vertical margins or if there is a trick I am missing to counteract this side-effect. I am sure some good thinking went into that tweak.
p {
margin: 1em 0;
}
Here is a fiddle reproducing what I mean:
http://jsfiddle.net/d6njL0zn/
Thanks!
Most browsers come standard with 1em vertical margins on elements. That is why Normalize.css also has it. Normalize just takes the normal css defaults in a browser and makes them more consistent across all browsers.
If you would like complete control over how your css is set up, consider using reset.css
HTML2 developed in 1995 had margins for the p and pre tags. The default CSS values are to make those pages which do not use CSS display the same as they did back when they were written. I could be mistaken but I believe the default margin for the body tag of 8 pixels was Microsoft's idea.
I was just wondering if there was any disadvantages for having empty divs in place in order to have a layout that I desire. Is there any other way around having hidden divs because I know that it adds to messy code.
See images below for what I am trying to demonstrate:
As you can see, the bullet points on the left are level with the h2 element but when I add a h2 element before the bullet points, it lowers them to the level of the paragraph (which is how I want it). Obviously I can make this h2 element invisible and therefore achieve my desired effect but is there more of a professional way of doing this?
But why you want to do that? Whats margin-top property for?
I'll go lil brief here, you should first learn floats than go for positioning, also learn what block and inline elements are, you got a lot of CSS things out there, margins,paddings` etc, take a look at box-model too so that you don't pull your hair later
And if you want to stick to a dirty markup than empty div's and br are options for you, but you won't get a specific height from top using br so for that you need to use an empty div but DON'T USE THIS
Two suggestions which will provide a quick fix:
Margin-top on the bullet points element or.
Add an H2 with a non-breaking space inside it e.g.
<h2> </h2>
If you want to add extra space without CSS, you can use <br/>
tags - its definitely a much better than empty divs, which is messy and a bad practice.
CSS is really the best way, though.
Give the h2 a width so it takes up the entire rest of the row. The bullet list will then automatically drop to the same height as the left paragraphs.
Or, give the bullet list a margin-top or padding-top.
I suggest that you use either margin-top for the second div or margin-bottom for the first one.
Example: If the hidden div's height is 100px, you better write: <div style="margin-bottom:100px">...</div>
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
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
I've seen numerous people mentions that you shouldn't use widths and padding or margins on the same element with CSS. Why is that?
Because some browsers treat the width as the total width of the element including the padding and the margins, and others treat the width as the base width to which the padding and margins are added. As a result your design will look different in different browsers.
For more information, see the W3C page on Box Model and quirksmode's take.
A lot of people still cling to notions about faulty box-models in IE and reckon that if you start messing around with element widths, padding and margins, you're going to get into trouble.
That's pretty outdated advice - assuming you're using a correct doctype, all fairly modern browsers (including IE6+) will work to the same box model, and you shouldn't really have too many issues related to it.
This being CSS, you will obviously have a million other cross-browser issues, but the infamous IE box-model is becoming a thing of the past.
I've never come across a problem caused by using width, padding and/or margin together.
So long as you have a valid DOCTYPE and are not in Quirks Mode, you will have a predictable box model and therefor should use whichever is most appropriate out of margin/padding to represent what you are trying to do.
Note:
Margin applies outside of borders, padding applies inside of borders.
Width means inner width of the container, the Total width = margin+border+padding+width (remembering that the first three are added for both left and right hand side).
Are you stating that padding and/or margin values shouldn't co-exist with a DOM element that also has a width value assigned to it? If so, that is only true if you do not want to write CSS that is compatible with both IE as well as browsers which implement web standards (e.g. Firefox). It would be difficult to achieve the layout you're looking for usually without some margin or padding value. But I suggest that you write CSS that is compatible for both browsers. If this is not what you are asking, then please correct me :)
The reason may be the famous box model problem.
Summary: IE renders width different then the standard rendering if padding and margin used with width or height.
I can think of 2 reasons:
1) the old "box model" of IE is really flaky, so when you have an element with the style { width: 300px; padding: 30px; margin: 20px;} it's outline might not actually match up to the expected 400px (300 px size, plus 2 30px padding, plus 2 20 px margin. I think its actual width would be 340, as it rolls the padding into the width calculation.
which brings is to...
2) Some people find the calculations a little confusing.
That said, I personally use widths along with padding and margins and have no problems with it. If you limit yourself to not using widths when using paddings/margins, that means you are peppering your code with a lot of non-semantic cruft. It does mean you have to be aware of what the various browsers are going to do with the element, but this is why we browsertest.
One important point to note is that it can make using percentage widths almost impossible. Take this for example, if you want your "content" div to take the full width, but have a 10px padding:
#content {
width: 100%;
padding: 0 10px;
}
That works in the (sensible, but incorrect) IE model, but in standards compliant browsers your div will occupy a width of 100% + 20px which is no good. The solution is to use another "inner" container.
<div id="content">
<div class="inner">
content here.
</div>
</div>
#content {
width: 100%;
}
#content .inner {
padding: 0 10px;
}
It's a bit annoying have the extra markup, but it makes a lot of things easier in the long run.