When specifying a 0 value in CSS, should I explicitly mark the units or omit?
I argue you should also omit the units.
From a programmer's perspective, 0 == null == none == false
, where 0px == 0px
only.
Which means that if you specify a border width of 0
then no border will be there, but if you specify a 0px
border, then a border of 0 px will be created (that's the idea behind it, in reality 0px
gives the exact same result like 0
).
Further Points
- unit-less
0
makes it easier to read as it is easily distinguishable from normal unit'ed values. - It makes sense to remove the units as they have no point in being there (0 could mean size, color, etc.).
Conclusion: Omit the units in 0. They're not needed and confusing.
property: 0' or 'property: 0px' in CSS?
While the unit is optional when the value is 0
, I tend to leave it in, as I can then tweak the values with Chrome's Developer Tools by clicking on the value and pressing the up/down arrow keys. Without a unit, that isn't really possible.
Also, CSS minifiers strip the units off of 0
values anyways, so it won't really matter in the end.
CSS difference between 0 and 0em
There's no difference when the value is 0. If it were 1 and 1em, yes, there's a difference, but 0 is 0, no matter the unit.
CSS size declarations
No disadvantages, you can use 0 without "px".
A zero length may be represented instead as the ‘0’. (In
other words, for zero lengths the unit identifier is optional.)
http://www.w3.org/TR/css3-values/#lengths
Edit: also this question have been asked already
- Size of zero pixels in CSS with or without 'px' suffix?
- When specifying a 0 value in CSS, should I explicitly mark the units or omit?
How to keep the same units from my precipitation data when using masked_array?
If you're not trying to use MetPy calculations with your precipitation data and you don't need to do any unit conversion, then you should be able to eliminate the use of masked_array
altogether. So try this:
prcp = nc_data.variables['precipitation']
data = prcp[:]
lat = nc_data.variables['lat']
lon = nc_data.variables['lon']
Unit for sizes in CSS
TL;DR:
- Use
%
for horizontal page layout em
works great for vertical spacing- Use anything you prefer for
font-size
(I likeem
) - Use
em
for media queries
CSS Measurement Units
I find that my usage of different CSS measurement units varies with the area of measurement I'm dealing with: horizontal, vertical, typography, or media query.
Horizontal measurements
The horizontal space gives structure to the page. Thus, horizontal measurements work well with units relative to the page width (%
). For example, it's great for giving some basic breathing room to the main content:
#main {
width: 90%;
margin: 0 auto;
}
More complex layouts (columns, for example) also work well when one or all of the horizontal measurements are proportional to the page or to their container.
.column-main {
width: 61.8%; /* The golden ratio is pretty awesome. */
}
.column-secondary {
width: 38.2%;
}
There's a corollary to this idea, which is that if you set up your container structure well, you won't have to do much horizontal sizing on the contents. You basically let the block-level elements fill the width of their container, as they like to do, and you're all set.
Vertical measurements
Vertical space is more about the structure of the content (i.e. how close elements in the document flow are to one another), and I think these measurements work fine with both fixed and relative units (px
or em
).
However, using relative units here helps give you a vertical rhythm, which can be very pleasing. It also allows you to make changes to your content (read: font-size
) and keep your vertical spacing proportional.
p, ul, ol, dl {
margin: 0 1em; /* gives you proportional spacing above and below,
no matter the font size */
}
Typographic measurements
Font measurements fall into their own category, maybe because font-size
acts as the base for all other measurements in em
. I've seen advocates for different strategies, but from what I've seen any measurement will work fine, as long as you know what you're doing.
px
Setting font-size
in px
is extremely reliable and easy to calculate. In the post-IE6 age, it also scales nicely, so there's really no reason not to use px
if that's what you prefer.
The only problem I see in using px
is that it doesn't take advantage of the CSS cascade. In other words, once I've specified sizes in px
, I have to go back and change each one of them individually if I want to make any large-scale changes.
em
Despite any drawbacks, I think em
can be a really good way to specify font-size
. What I like is that it lets me quickly see the relationship between my font sizes. A lot of times I don't care what the exact size of the font is because the most important thing for me is the relationship of that size to all of the other sizes on the page.
The important thing about using em
is to set the sizes as close to the end tag as possible. That means I avoid setting font units on containers:
aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */
And mostly set sizes on headings and text items:
h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...
Anyway, I like that I can see clearly and easily the relationship between the sizes there.
rem
Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px
as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.
The biggest drawback here I see is browser support. If you code for browsers that don't support rem
, you'll be adding your rules twice:
p {
font-size: 16px;
font-size: 1rem; /* I kind of hate repeating myself here,
but a good CSS preprocessor might ease that pain. */
}
Font Spacing
Other font measurements are a lot easier to figure out once you've got your font-size
since most other font measurements fall into the category of either vertical or horizontal measure. For example:
h1 {
font-size: 2.5em; /* Change this, and everything below stays proportional.
(Use whatever measurement unit you prefer.) */
margin-top: 0.618em;
margin-bottom: 0.3em;
line-height: 1.2; /* The only unit-less measure in CSS */
}
Media queries
In most cases, there is little difference between the way browsers handle em
and px
in media queries. This holds true even when a user uses text zoom to resize the page.
HOWEVER, if someone has changed the default text size in their browser settings, things behave very differently. See my answer to a related question and my codepen demo for a longer explanation.
In short, while px
works well for media queries in most cases, it's definitely safer to go with em
.
Other cases
There are certainly cases where the above general comments don't apply. For example, you may find that em
s come in handy any time you want things proportional to the font size, like the following:
h1.title {
font-size: 2em;
width: 20em; /* Resizing the font also resizes its container properly. */
background-color: #d00d1e;
}
@media (min-width: 400px) {
h1 {
font-size: 2.5em; /* Woot! Didn't have to touch the width! */
}
}
Or maybe you want to constrain line lengths for readability:
p {
max-width: 42em;
}
Also, as mentioned in other comments, px
still works well for borders and things like that. It can also be good for padding, especially when you pair it with box-sizing
:
.example {
width: 80%;
box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
padding: 10px;
}
Related Topics
How to Check for Duplicate CSS Rules
How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability
Pixel Density, Retina Display and Font-Size in CSS
Responsive Images Positioned Over Image
How to Place Div Inside Another Div to Absolute Position
How to Add Compass Syntax Support to Jetbrains PHPstorm
CSS Fade Out Horizontal Rule/Line Styled Div Effect Without Images
Cannot Understand the Use of :Host in Components in Angular2
Display Bootstrap Popovers Outside Divs with Overflow:Hidden
Hovering Over CSS Transition in Safari Lightens Certain Font Color
How to Cut Out a Triangle Section from a Div Using CSS
Font Smoothing Techniques? Text-Shadow Rendering Differently in Chrome 14.0.833.0 or Higher
How to Make a Transparent Border with CSS
How to See the Print Media CSS in Firebug