1

I'd like to know which of the ways to do this syntax is more work for the browser:

First:

margin: 0;

Second:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Third:

margin: 0 0;

And finally, the same questions except with 0px;.

krainboltgreene
  • 1,841
  • 2
  • 17
  • 25

5 Answers5

2

In my opinion you should specify a unit like 0px all the time even when you're using 0, to avoid forgetting to add the unit on when you change the value to something non-zero, but that's a matter of personal preference.

As for the browser, those are all equivalent. It takes negligible time for the browser to understand any of those relative to the download time of the css. For that reason margin: 0px; is the best because it is only 12 bytes compared to the longest version you posted which (with `px) units added on) is 69 bytes so nearly 6x the amount of data to download.

60 bytes isn't much anyways, but if you repeat that a lot, then when it's down to the wire, the shorter syntax is faster. It's also nicer to read :)

Paul
  • 139,544
  • 27
  • 275
  • 264
  • `"You should specify a unit like 0px all the time even when you're using 0."` - why? – thirtydot Jul 27 '11 at 00:05
  • @thirtydot, because 0 is the only value that it is valid css to not specify a unit. But it's good practice to specify a unit anyways (the same unit you are using throughout your page) so that if you or someone else changes it from 0 later, you/they don't forget to add on the unit. – Paul Jul 27 '11 at 00:12
  • 1
    It's definitely a matter of opinion, but I disagree with keeping the unit for `0`. My reasoning is covered here: http://stackoverflow.com/questions/5359222/size-of-zero-pixels-in-css-with-or-without-px-suffix – thirtydot Jul 27 '11 at 00:27
  • @thirtydot True. I was stating my opinion when I said "You should specify a unit like 0px all the time even when you're using 0." I should have been more clear that it is a matter of opinion as to whether or not you include the unit on 0. – Paul Jul 27 '11 at 00:35
  • 1
    @thirtydot, I made it more clear now, that it is only my preference to always add the unit. – Paul Jul 27 '11 at 00:37
  • Extra typing, extra characters to send over HTTP. Really, I cannot like specifying 0px. I have never had a problem with remembering px - but I have had the problem of crunching everything down to minimal size to improve perf and I don't like wasting keystrokes. – mahalie Mar 07 '12 at 22:02
2

This may not be the answer you're looking for, but I feel that...

This is SOOOO inconsequential as far as computer performance goes. What matters much, much more is readability and maintainability. Which variation do you think would be easiest to maintain and understand for someone your company hires off the street? That's the one you should choose.

Kon
  • 27,113
  • 11
  • 60
  • 86
1

This depends entirely on the browser's internal implementation. It's most likely for any given browser that the more verbose definitions will be very slightly more work simply because there's more text to parse. In practice, though, CSS engines are really blazingly fast; none of these is enough work to matter for processing time.

Nentuaby
  • 590
  • 6
  • 10
0

The "work" would be negligable. I guess, technically, the second one would be more work since it would have to parse 3 more lines instead of just 1. The first one is how I would suggest doing it.

Personally, I always do:

margin: 0px 0px 0px 0px;

Just to help if I decide to change something in the future.

Its really not important, though. There is a negligible difference between all of them

Chris
  • 1,569
  • 2
  • 11
  • 18
0

I have wondered this too, for performance reasons.

If maximum performance is your concern - supposing there's no major difference for the browser - then margin: 0 would help to keep the weight of your CSS file down overall.

If you work with CSS a lot mentally extrapolating margin: 0; to longhand or even margin: 4px 0 3px; should not be much of a leap. Why waste the time typing and the character weight?

mahalie
  • 2,647
  • 20
  • 21