I have the following snippet in my stylesheet. What is the impact or purpose?
* {
margin:0;
padding:0;
top: 0px;
left: 0px;
}
It is a reset. All elements will have 0 margin, padding, etc. after that.
Such resets are useful to normalize behavior (some browsers come with predefined margins, paddings, etc.) and to increase visual consistency across browsers.
It's a reset CSS. It's purpose is to remove default non-zero spacings for all (*) elements. All browsers have some default style sheet and they're not very consistent with each other. Take <form> as an example.
Note: Setting the left and top properties to 0px doesn't look right to me. It will most probably cause problems with absolute positioning. When positioning an element absolutely you may want to define only it's vertical or horizontal offset (not both), leaving the other offset unchanged. That reset CSS doesn't allow that because it gives values for both vertical and horizontal. Also you may want to position an element from the bottom. If you have that reset it will have both bottom and top which in most cases is not wanted and may alter the height of the element or not respect one of the offsets. In any case it will give you something not intended and break your layout.
For those who want to learn more: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning
It applies the rules contained within to all elements of the page; creating a predictible baseline for cascading rules.
The technique is called a "reset" (google for "CSS Reset") and is an approach to resolve different browsers using different default CSS rules.
These rules should applied as early as possible, typically at the start of the first-loaded CSS sheet.
The purpose of your snippet is to reset the margin, padding and set the position to the top-left corner of the viewport in your web-browser.
The Estric simbol is known as all /everything so the meaning of this is the CSS will be implemented over all elemetns and set the values as parametered.
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 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
The new display:inline-block attribute seemed like a useful alternative to doing display:block + float:left/right, but the strange spacing/white-space behavior it introduces seems to negate that convenience.(See here and here) On top of that, browser support is spotty and needs fixes, though that will obviously change.
According to this Yahoo UI uses it heavily, but why? Is there a compelling case for using inline-block?
One useful situation is when you want to have rows of items with variable height. If you were to use floats, then you'd also have to come up with some way to clear all of the second row from the first. Here's an example of that ugly behavior.
But, using the magic of inline-block, here's a version that works. With only two additional CSS rules, it even works in IE6 and 7!
I usually use inline-block for inline elements that I want to be able to give height and width to. This is helpful when using sprites (especially for rounded corner buttons using the sliding door method). I don't use it for everything though and I'm more likely to actually use a float when needed than to break a block level element to using inline-block.
Because floats introduce issues in IE in terms of horizontal floats need an explicit width assigned in order to stay on the same horizontal level. With inline-block ( with fixes ) you can avoid assigning explicit widths to the floated items but maintain the blocky inline behaviour that you desire.
You also don't have to clear the items afterwards but I guess that compensates for the inline-block fixes you need to do.
using css how do I put a span on top of other spans.
I have several spans in the page and at the end of the page I have this
<span id="lastSpan" style=" margin-left:726px; margin-top:30px;"></span>
problem with that is that it never goes to 30px down from top. and stuck at same height.
any help will be appreciated
thanks
Span's are inline elements and don't adhere to margin on top and bottom. You need to set it to display: inline-block if you want margin to work.
spans are inline elements. you cant apply margins to them. use a div if you need a generic container with margins/height.
Inline elements can't be styled the same way as block elements. For one, they are (entirely?) unresponsive to margin and height commands. The solution is to add display: block; to your styling to force block styles.
span wont accept margin properies, cos it is inline element. You can change it to block element by display:block, float:left/right or position:absolute
This might be captain pædantry to the rescue, but that spans are inline-level has little to do with this. The fact that most (all) browser's house-style sheet implicitly sets the span's property on display:inline does unless the author or the user explicitly overrule this does though. As far as I know, the W3C does not define what the house style of browsers must be, but they do give some pointers for interoperability.
Of course, this might not be as relevant here, but there are actually some places where browsers don't pick their styles all the same. Notably Safari and Chrome do not place a dashed border under abbr by default while Firefox and IE do. Also, some browsers space paragraphs by using margin-top:1em; while others use margin-bttom:1em, in most cases this doesn't matter but there are some cases where defining explicitly which of the two you want in your site is in fact needed for a consistent look.
I wonder if on any browser div element comes with a preset margin/padding value other than zero. As far as I know, div and span come with zero padding and margin values by standard to make them suitable canvas for style decoration.
Even better, is there a definite standard for default styles for all elements that is cross-browser which we can make assumptions upon? For instance FORM comes with top/bottom margins, OL/UL come with padding-left's.
I occasionally see a
* {
margin: 0;
padding: 0;
}
and this just looks like a dirty hack without knowing the reasons or consequences. Anyone has any better approach to this?
Different browsers have different defaults -- this is why using CSS resets like these
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
are popular in order to insure that browsers are treating all the elements equally. It gives you a baseline and then expects you to define all the relevant styling.