Which should i use between border none or border 0

4个答案

In CSS, border: none and border: 0 can both be used to remove an element's border, but they have subtle semantic differences.

border: none indicates the absence of a border, meaning the border style is explicitly set to 'none', which signifies that the border is not displayed; whereas border: 0 sets the border width to 0, effectively hiding the border but semantically emphasizing the width.

For most browsers, both approaches remove the element's border, resulting in identical visual outcomes. However, border: none may offer better readability in certain contexts because it directly conveys that the border is nonexistent, while border: 0 requires readers to infer that a width of 0 implies the border is not visible.

Practically, using border: none more clearly communicates your intent, which is advantageous for team collaboration and code maintenance.

For instance, when working with a button component, you might define its styles as follows to ensure the button appears without borders in all scenarios:

css
.button {
  border: none;
  /* other styles */
}

This approach allows anyone reviewing the code to intuitively recognize that the border should not be displayed.

In summary, border: none and border: 0 are generally interchangeable. However, border: none is more semantically clear, so unless performance optimization or other specific factors are involved, it is recommended to use border: none to enhance code readability.

2024年6月29日 12:07 回复

As others have pointed out, both are valid and function as expected. However, I'm not entirely convinced they are identical. If you're working with a cascade, theoretically they might produce different results because they override different values.

For example, if you set "border: none;" and then apply two different styles to override the border width and style, one might apply while the other does not.

In the following IE and Firefox example, the first two test divs have no border. However, the second div behaves differently: the first div within the second block is plain, while the second div within the second block has a medium-width dashed border.

Therefore, although both are valid, if they cascade extensively as I believe, you might need to be cautious with your styles.

html
<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

2024年6月29日 12:07 回复

They are actually equivalent but refer to different shorthand notations:

css
border: 0;
// shorthand for...
border-width: 0;

and another:

css
border: none;
// shorthand for...
border-style: none;

Both are valid; you can simply choose one :)

2024年6月29日 12:07 回复

Both are valid. This is your choice.

I prefer border:0 because it's shorter; I find it easier to read. You might find none clearer. In a world with powerful CSS post-processors, I recommend using whatever you prefer and then running it through a "compressor." There's no holy war to fight here, but Webpack → LESS → PostCSS → PurgeCSS is a great 2020 stack.

That said, if you're hand-writing all production CSS, I think (despite complaints in comments) paying attention to bandwidth isn't a bad thing. Using border:0 itself saves a negligible amount of bandwidth, but if you fully utilize every byte, you'll make your site faster.

CSS2 specification here. These are extended in CSS3, but it has no bearing on this.

shell
'border'
    Value:      [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
    Initial:    see individual properties
    Applies to:     all elements
    Inherited:      no
    Percentages:    N/A
    Media:      visual
    Computed value:     see individual properties

You can use any combination of width, style, and color.
Here, 0 sets the width, none sets the style. They produce the same rendering result: nothing is displayed.

2024年6月29日 12:07 回复

Which should i use between border none or border 0

4个答案

你的答案