are margin and padding most disbalanced thing among all browser?
Asked Answered
D

3

2

While some people use this reset. * { margin: 0; padding: 0; }

Is every element has default margin and padding in each browser default stylesheet( but differently)?

While eric meyer collected some most used selectors and given this to all

{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Are those elements has different type of font sizes? different baseline, different background, outline and border?

if we keep besides cons of universal selector.

is this

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

better than this

* {
  margin: 0;
  padding: 0;
}
Dearly answered 22/5, 2010 at 2:6 Comment(0)
D
5

You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.

If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.

I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.

As to the remnant of the reset:

  • The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.

  • The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.

  • The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?

  • The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.

  • The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.

Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.

Dieterich answered 22/5, 2010 at 3:20 Comment(3)
Thanks for good answer. I think people follow some popular reset without knowing proper reason and requirement. I feel when we were not using css reset we were making css in less character then today. after using reset we will have to restyle every element. Thanks for good link.Dearly
border: 0; is also used by only 3-4 elements, adding for all would be overkill (as in eric meyer css). it's as bad as universal reset.Dearly
Ah, I overlooked the border. Added it.Dieterich
W
0

Well, 'better than this' is hard to say, but the one with more stuff does more.

outline 0 makes links not have the dotted border around them.

Border 0 makes images and such not have a border around them.

font-size: 100% probably does something like ensure the fonts are 100%.

vertical-align: baseline sets all vertical alignments to the bottom of the container,

background: transparent prevents some png problems.

but margin:0 and padding:0 are two that defiantly should not be omitted from your reset list.

Wong answered 22/5, 2010 at 2:10 Comment(6)
I feel when we were not using css reset we were making css in less character then today. after using reset we will have to restyle every element.Dearly
@Wong - but what about those elements who doesn't have any border, outline by default and using reset css technically we have added border:0 and outline:0 to those.Dearly
yep, instead of relying on the browser to set a default, which could be null, 0, 1 whatever, we are setting it to 0. Mainly, removing the outlines from links and borders from images simply looks better.Wong
as pianosaurus said, you will need to add classes to deal with form inputs - input{border: 1px;} - will workWong
removing the outlines from links looks better for mouse users. removing the outlines from links makes navigation difficult for keyboard users! (try tabbing through a document with outline zero on all links, then try to guess which link has the focus!)Coax
i discriminate against people who use only their keyboard to navigate though.Wong
C
0

The short answer is: Feel free to set all of those if you are ready to override it for any element that may need it later.

However, note that you may have a lot of work ahead of you when it comes to form elements. They require at least a border to look good, and some of them (e.g. buttons) need a padding too. Also, some browsers display a 3D-ish border around buttons by default. If you set border to 0, you will not be able to get that 3D look back using CSS.

Also, you might want to check out http://www.blueprintcss.org/. It equalises browsers quite well, it seems, though I haven't tried it myself.

Classis answered 22/5, 2010 at 2:24 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.