Что я должен использовать: «граница: нет» или «граница: 0»? [css, border]

arrow_upward
483
arrow_downward

Оба варианта допустимы. Это ваш выбор.

Я предпочитаю border:0, потому что он короче; Мне так легче читать. Вы можете найти none более разборчивым. Мы живем в мире очень мощных постпроцессоров CSS, поэтому я рекомендую вам использовать все, что вы предпочитаете, а затем запускать его через компрессор. Здесь нет священной войны, за которую стоит сражаться, но Webpack → LESS → PostCSS → PurgeCSS - хороший стек 2020 года.

Тем не менее, если вы пишете от руки весь производственный CSS, я утверждаю - несмотря на ворчание в комментариях - не помешает учитывать пропускную способность. Использование border:0 само по себе сэкономит бесконечно малую часть полосы пропускания, но если вы подсчитываете каждый байт, вы сделаете свой веб-сайт быстрее.

Спецификации CSS2 находятся здесь. Они расширены в CSS3, но не имеют к этому никакого отношения.

'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

Вы можете использовать любую комбинацию ширины, стиля и цвета.
Здесь 0 задает ширину, none стиль. У них одинаковый результат рендеринга: ничего не отображается.

Oli 27.05.2010

comment

Если у вас большой трафик, вы заметите разницу! - Я очень в этом сомневаюсь. Даже с миллионом посетителей в час разница составляет всего 3 МБ. И это при условии, что ни у кого из этих посетителей не кэширован CSS, а также предполагается, что сжатие дает нулевую выгоду, оба очень маловероятные утверждения. На самом деле, это, вероятно, будет разница в несколько сотен килобайт в день, что в основном равно нулю для большого сайта. Не то чтобы я думаю, что border:none в чем-то лучше, но использовать это в своих рассуждениях неверно. - BlueRaja - Danny Pflughoeft; 08.02.2014

comment

@ BlueRaja-DannyPflughoeft Это был скорее сарказм, чем что-либо другое ... ... Или гипербола ... Или то и другое. Вы правы, это, скорее всего, никогда ни на что не повлияет во время выполнения, если вы не воспользуетесь им миллионы раз и не дадите всем в Интернете доступ к вашему CSS одновременно. - Oli; 09.02.2014

comment

Может, стоит добавить к описанию, что утверждение было сарказмистским? :) - timofey.com; 16.12.2014

comment

Кроме того, все css будут обслуживаться в кодировке gz (можно было бы надеяться), уменьшая преимущество трех символов до нуля. - Jamie Pate; 15.04.2015

comment

Для полноты картины хотелось бы добавить еще один аспект. Для передачи 1 МБ данных требуется количество энергии, содержащееся в обычном угольном брикете. См. Этот доклад Джея Уокерса на TED: player.vimeo.com/video/22399003. - Zensursula; 27.08.2016

comment

Могу я указать, сколько мегабайт дополнительного трафика и минут времени было потрачено впустую из-за этого расчета и обсуждения? А теперь я трачу еще больше! - Andrew; 06.06.2017

comment

Неужели я единственный здесь, кто радуется лишней наносекунде? - Leathan; 08.08.2017

comment

@ Zensursula - Re: Перенос 1 МБ древесного угольного брикета энергии - это хорошее мнение, но эти цифры далеко. Трудно найти научный анализ сквозного энергопотребления для передачи данных, но что-то порядка ~ 0,02 МДж / МБ было бы разумным около десяти лет назад (когда было снято видео). С другой стороны, брикет древесного угля составляет около 0,4 МДж (нижний предел). Так что даже тогда это было огромной натяжкой. Сегодня более разумными являются значения ~ 0,0001 МДж / МБ, так что теперь это ~ 0,03% брикета на МБ. Цитирование: onlinelibrary.wiley.com/doi/full/10.1111/jiec.12630 < / а> - Erdős-Bacon; 13.06.2019

comment

@ Erdős-Bacon Уф, я думал, 1 брикет на МБ звучит много !! - 00-BBB; 19.08.2020

arrow_upward
167
arrow_downward

Они эквивалентны эффекту, указывая на разные ярлыки:

border: 0;
//short for..
border-width: 0;

И другие..

border: none;
//short for...
border-style: none;

Оба работают, просто выберите один и продолжайте :)

Nick Craver 27.05.2010

comment

Также обратите внимание, что После нулевой длины, идентификатор единицы не обязателен, поэтому border: 0; является допустимым. - Ishmael; 27.05.2010

comment

@Dubs серьезно? Вам нравится, когда люди ссылаются на w3schools? - ajax333221; 28.12.2011

comment

@ ajax333221 - Будьте осторожны с черно-белым отношением к w3schools (или любому веб-сайту). В данном случае описание хорошее, хотя я их в целом ненавижу, их объяснение, относящееся к этому вопросу, правильное и довольно сжатое. Вы можете ненавидеть их в целом, и я ненавижу их, но не думайте, что 0% контента там полезно, что-то есть, даже некоторые вещи в ответах Yahoo в какой-то степени полезны. - Nick Craver; 28.12.2011

comment

@ ajax33221, я использовал их как удобный ресурс, когда впервые учился на веб-сайте, как в Интернете. Спасибо, что обратили мое внимание на их проблемы! - Dubs; 06.01.2012

comment

Неправильный! Как описано в моем ответе и продемонстрировано в живая демонстрация, border: 0 НЕ является ярлыком для border-width: 0. Вместо этого краткая версия всегда устанавливает все три свойства: border-color, border-style и border-width. - Denilson Sá Maia; 01.08.2014

comment

@ DenilsonSá Я сказал, что они были такими же по сути, что и самая первая строка ответа, потому что, если ширина границы равна 0, остальные 2 здесь не имеют значения. В стороне, однако, CSS 2.1, который прояснил поведение здесь, был последним вызовом через 7 месяцев после этого ответа и выдвинут в качестве рекомендации через год после него. Если вы хотите уточнить старые ответы здесь, сделайте это! Редактирование для обновлений активно приветствуется. - Nick Craver; 01.08.2014

comment

Я рад узнать, что я не единственный, кто ненавидит w3schools. Это сайт, который вы получили бы, если бы наняли механических турок для создания всего вашего контента и потратили большую часть своей энергии и времени на совершенствование SEO. Он мягкий и не содержит каких-либо подробных сведений, но почти всегда находится в верхней части каждого релевантного поиска Google. - iconoclast; 09.09.2018

comment

@ ajax333221: не могли бы вы предложить альтернативу w3schools? - user27182; 10.09.2020

comment

@ user27182 Обычно я использую Google JavaScript, связанный с этим массивом, присоединяюсь к MDN (developer.mozilla.org) - хороший ресурс - ajax333221; 10.09.2020

comment

@ ajax333221 спасибо. гугл обычно отправляет меня в w3schools ... - user27182; 11.09.2020

arrow_upward
42
arrow_downward

Как говорили другие, оба действительны и сделают свое дело. Я не уверен на 100%, что они идентичны. Если у вас происходит каскадирование стилей, теоретически они могут давать разные результаты, так как они эффективно переопределяют разные значения.

Например. Если вы установите "border: none;" а затем, позже, есть два разных стиля, которые переопределяют ширину и стиль границы, тогда один будет что-то делать, а другой - нет.

В следующем примере как в IE, так и в firefox первые два тестовых div не имеют границы. Однако вторые два отличаются тем, что первый div во втором блоке является простым, а второй div во втором блоке имеет пунктирную границу средней ширины.

Так что, хотя они оба действительны, вам может потребоваться следить за своими стилями, если они много каскадируются и тому подобное, как я думаю.

<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>

Chris 01.06.2010

comment

Чтобы убрать границы датпикеров в Sencha Touch 2, мне пришлось использовать border: none вместо border: 0. - Kris Khaira; 27.06.2012

arrow_upward
41
arrow_downward

(примечание: этот ответ был обновлен 01.08.2014, чтобы сделать его более подробным, точным и добавить демоверсия)

Расширение свойств шортенда

Согласно спецификации W3C CSS2.1 ( «Пропущенным значениям присваиваются начальные значения»), следующие свойства эквивалентны:

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

Если эти правила являются наиболее конкретными, применяемыми к границам элемента, то границы не будут отображаться ни из-за нулевой ширины, ни из-за стиля _2 _ / _ 3_. Итак, на первый взгляд, эти три правила выглядят эквивалентными. Однако в сочетании с другими правилами они ведут себя по-разному.

Границы в контексте таблицы в модели сворачивающейся границы

Когда таблица визуализируется с использованием border-collapse: collapse, каждая визуализированная граница используется совместно несколькими элементами (внутренние границы используются совместно с соседними ячейками; внешние границы используются совместно между ячейками и самой таблицей; но также строки, группы строк, столбцы и группы столбцов имеют общий доступ. границы). В спецификации определены некоторые правила разрешения пограничных конфликтов:

Границы с border-style из hidden имеют приоритет над всеми другими конфликтующими границами. […]

Границы со стилем none имеют самый низкий приоритет. […]

Если ни один из стилей не hidden и хотя бы один из них не none, то узкие границы отбрасываются в пользу более широких. […]

Если стили границ различаются только цветом, […]

Таким образом, в контексте таблицы border: hidden (или border-style: hidden) будет иметь наивысший приоритет и сделает общую границу скрытой, несмотря ни на что.

На другом конце приоритета border: none (или border-style: none) имеют самый низкий приоритет, за которым следует граница нулевой ширины (потому что это самая узкая граница). Это означает, что вычисленное значение border-style: none и вычисленное значение border-width: 0 по существу одинаковы.

Каскадные правила и наследование

Поскольку none и 0 влияют на разные свойства (border-style и border-width), они будут вести себя по-разному, когда более конкретное правило определяет только стиль или только ширину. См. Пример в ответе Криса.

Живая демонстрация!

Хотите увидеть все эти случаи на одной странице? Откройте живую демонстрацию!

Denilson Sá Maia 18.07.2014

arrow_upward
21
arrow_downward

С использованием

border: none;

не работает в некоторых версиях IE. IE9 прекрасен, но в предыдущих версиях он отображал границу, даже если стиль был «none». Я испытал это при использовании таблицы стилей печати, где мне не нужны границы в полях ввода.

border: 0;

похоже, нормально работает во всех браузерах.

Kieran 06.04.2012

arrow_upward
12
arrow_downward

Вы можете просто использовать оба в соответствии со спецификацией, любезно предоставленной Оли.

Я всегда использую border:0 none;.

Хотя нет ничего плохого в том, чтобы указать их по отдельности, и некоторые браузеры будут анализировать CSS быстрее, если вы используете устаревшие вызовы свойств CSS1.

Хотя border:0; обычно по умолчанию использует стиль границы none, я, тем не менее, заметил, что некоторые браузеры применяют свой стиль границы по умолчанию, который может странным образом перезаписывать border:0;.

Xenni82 21.04.2011

comment

некоторые браузеры будут анализировать CSS быстрее → нет заметной разницы во времени синтаксического анализа CSS. И действительно, время синтаксического анализа CSS не имеет отношения к 99,999999999999% случаев. Время рендеринга CSS гораздо важнее (и также совершенно не связано с этим вопросом). - Denilson Sá Maia; 01.08.2014

comment

Некоторые браузеры? Что ты имеешь в виду? Похоже на сон или что-то в этом роде. - Rootical V.; 27.08.2015

arrow_upward
7
arrow_downward

Я использую:

border: 0;

Из 8.5.4 в CSS 2.1:

'граница'

Значение: [‹border-width> || ‹Border-style> || ‹'Border-top-color'>] | наследовать

Так что любой из ваших методов выглядит нормально.

cletus 27.05.2010

comment

Нулевой пунктир выглядит так же, как нулевой сплошной - Christopher Altman; 27.05.2010

comment

Правда. Но см. Также ответ Криса - Antony Hatchkins; 24.01.2012

arrow_upward
6
arrow_downward

Что ж, чтобы точно увидеть разницу между border: 0 и border: none, мы можем провести несколько экспериментов.

Эксперимент:

Давайте создадим три блока: первый, границу которого можно отключить, установив его ширину равным нулю, второй, который можно отключить, только установив для него значение none, и третий с рамкой, которую можно «отключить», только установив его цвет до прозрачного. Затем давайте попробуем эффект:

border: 0;
border: none;
border: transparent

стиль границы: твердый! важный; цвет границы: красный! важно; ширина границы: 2px! важно; цвет границы: красный! важно; ширина границы: 2px! важно; стиль границы: твердый! важный;

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
	container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
	container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
	container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
	container.className = "";
});

div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}

<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

Мои результаты были одинаковыми как в Firefox, так и в Chrome:

border: 0; Похоже, что для ширины границы установлено значение 0, а для стиля границы - none, но не изменить цвет границы;

border: none; Похоже, меняет только стиль границы (на none);

border: transparent; Кажется, изменил цвет границы на transparent и стиль границы на none;

Agesly Danzig 13.03.2018

arrow_upward
2
arrow_downward

Хотя результаты, скорее всего, будут одинаковыми (без границы), 0 и none технически относятся к разным вещам.

0 указывает ширину границы, а 0 - стиль границы. Очевидно, что граница шириной 0 не существует, поэтому у нее не будет стиля.

Однако, если позже в вашей таблице стилей вы намереваетесь переопределить это, вы, естественно, специально обратитесь к одному или другому. Если бы мне теперь нужна граница в 3 пикселя, это было бы прямо переопределение границы: 0 в отношении ширины. Если бы мне теперь нужна пунктирная граница, это было бы напрямую переопределение границы: нет в отношении стиля.

Carly 04.10.2016

arrow_upward
2
arrow_downward

Самый простой способ удалить границу с помощью css

border: 0;

Love Kumar 30.10.2019

arrow_upward
0
arrow_downward

Это результат в Firefox 78.0.2 (64-бит):

img {
    border: none;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: medium;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: medium;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
}

img {
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
}

Дата: 20200720

Malama 20.07.2020

arrow_upward
-3
arrow_downward

По моему мнению,

border:none работает, но не соответствует стандарту w3c

так что лучше мы можем использовать border:0;

anglimasS 01.02.2013

comment

В border: none нет ничего недействительного. - Quentin; 08.05.2016

Что я должен использовать: «граница: нет» или «граница: 0»?

Ответы (12)

Расширение свойств шортенда

Границы в контексте таблицы в модели сворачивающейся границы

Каскадные правила и наследование

Живая демонстрация!

'граница'

Эксперимент:

Вопросы по теме