'테두리 : 없음'또는 '테두리 : 0'을 사용해야합니까?

543

두 가지 방법 중 W3C 표준을 따르는 방법은 무엇입니까? 브라우저에서 예상대로 작동합니까?

국경 : 없음;
국경 : 0;

css border

— 존 힘멜 만
소스

74

이런 유형의 간과 된 질문이 마음에 듭니다.

— Christopher Altman

453

둘 다 유효합니다. 당신의 선택입니다.

나는 border:0그것이 더 짧기 때문에 선호합니다 . 나는 그것을 더 읽기 쉽다는 것을 안다. 당신은 찾을 수 none보다 읽기. 우리는 매우 유용한 CSS 포스트 프로세서의 세계에 살고 있으므로 원하는 것을 사용하고 "압축기"를 통해 실행하는 것이 좋습니다. 여기서 싸울 가치가있는 거룩한 전쟁은 없습니다.

모든 프로덕션 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스타일을 설정합니다 . 렌더링 결과는 동일합니다. 아무것도 표시되지 않습니다.

— 올리
소스

117

"트래픽이 많으면 차이를 느낄 수 있습니다!" -의심합니다. 시간당 백만 명의 방문자가 있어도 그 차이는 3MB에 불과합니다. 방문자가 CSS를 캐시하지 않았다고 가정하고 압축이 거의 이점이없는 0-이점을 제공한다고 가정합니다. 실제로는 하루에 수백 KB 차이 일 것입니다. 이는 대규모 사이트의 경우 기본적으로 0입니다. 나는 그것이 border:none어떻게 든 더 낫다고 생각 하지는 않지만 이것을 추론으로 사용하는 것은 잘못입니다.

— BlueRaja-대니 Pflughoeft

22

@ BlueRaja-DannyPflughoeft 그것은 다른 어떤 것보다 더 풍자적이었다 ..… 당신이 맞습니다, 이것은 당신이 그것을 수십 번 사용하고 인터넷의 모든 사람들이 CSS에 한 번에 CSS에 액세스하지 않는 한 무엇이든 런타임 영향을 미치지 않을 것입니다.

— Oli

6

어쩌면 성명서가 풍자적이라고 진술 할 가치가 있습니까? :)

— timofey.com

7

완전성을 위해 또 다른 측면을 추가하고 싶었습니다. 1MB의 데이터를 전송하려면 일반 숯 연탄에 포함 된 에너지 량이 필요합니다. Jay Walkers의 TED 강연을보십시오 : player.vimeo.com/video/22399003 .

— Zensursula

11

여분의 나노초로 환호하는 유일한 사람입니까?

— Leathan

155

그들은에서 동등한 효과 , 다른 단축키를 가리키는 :

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

그리고 나머지..

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

둘 다 작동합니다. 하나만 골라 가십시오. :)

— 닉 크레이 버
소스

5

또한 "길이가 0이면 단위 식별자는 선택 사항" 이므로 border: 0;유효합니다.

— Ishmael

59

@Dubs 진지하게?, 사람들이 w3schools에 연결할 때 좋아합니까?

— ajax333221

29

@ ajax333221-w3schools (또는 모든 웹 사이트)에 대한 흑백 태도로주의하십시오 . 이 경우 설명은 훌륭하지만 일반적으로 미워하지만이 질문과 관련된 설명은 정확하고 간결합니다. 당신은 일반적으로 그것들을 싫어할 수 있지만, 나는 그 내용의 0 %가 유용하다고 가정하지 않습니다.

— Nick Craver

4

잘못된! 에 설명 된대로 내 대답 하고 시연 라이브 데모 , border: 0바로 가기가 아닙니다 border-width: 0. 대신, 짧은 버전은 항상 세 가지 속성 ( border-color, border-style및)을 모두 설정합니다 border-width.

— Denilson Sá Maia

3

@ DenilsonSá 나는 테두리의 너비가 0이면 다른 2 개는 중요하지 않기 때문에 답의 첫 번째 줄과 효과 가 동일하다고 말했습니다 . 그러나 여기에서 동작을 명확하게하는 CSS 2.1은이 답변 후 7 개월이 지난 마지막 전화였으며 그 후 1 년 동안 권장 사항으로 추진되었습니다. 여기에서 오래된 답변을 명확히하고 싶다면 그렇게하십시오! 업데이트 편집을 적극 권장합니다.

— Nick Craver

42

다른 사람들이 말했듯이 둘 다 유효하며 트릭을 수행 할 것입니다. 나는 그들이 동일하다는 것을 100 % 확신하지 못합니다. 스타일 캐스 케이 딩이 진행되는 경우 이론적으로 다른 값을 재정의하므로 이론적으로 다른 결과를 생성 할 수 있습니다.

예를 들어. "테두리 : 없음;"을 설정하면 나중에 테두리 너비와 스타일을 재정의하는 두 가지 스타일이 있으며 하나는 무언가를하고 다른 하나는하지 않습니다.

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>

— 크리스
소스

1

Sencha Touch 2에서 날짜 선택기의 경계를 제거하려면 border: none대신 대신 사용해야 했습니다 border: 0.

— Kris Khaira

39

(참고 :이 답변은 2014-08-01에보다 상세하고 정확하며 라이브 데모 를 추가하기 위해 업데이트되었습니다 )

Shortand 속성 확장

따르면 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>

이러한 규칙이 요소의 테두리에 적용되는 가장 구체적인 규칙 인 경우 너비가 0이거나 hidden/ none스타일로 인해 테두리가 표시되지 않습니다 . 따라서 첫 번째로 볼 때이 세 가지 규칙은 동일하게 보입니다. 그러나 다른 규칙과 결합하면 다른 방식으로 작동합니다.

접는 테두리 모델의 테이블 컨텍스트 테두리

테이블을 사용하여 렌더링하면 렌더링 된 border-collapse: collapse각 테두리가 여러 요소간에 공유됩니다 (내부 테두리는 인접 셀로 공유되고, 외부 테두리는 셀과 테이블 자체간에 공유되지만 행, 행 그룹, 열 및 열 그룹도 테두리를 공유 함) ). 이 사양은 국경 충돌 해결에 대한 몇 가지 규칙을 정의합니다 .

와 테두리 border-style의 hidden다른 모든 충돌 테두리 인수 우선 순위. […]

스타일이 none가장 낮은 테두리의 우선 순위가 가장 낮습니다. […]

스타일 중 하나도 hidden없고 그 중 하나 이상이 아닌 none경우 좁은 테두리는 더 넓은 스타일을 위해 삭제됩니다. […]

테두리 스타일의 색상 만 다른 경우 […]

따라서 테이블 컨텍스트에서 border: hidden(또는 border-style: hidden)은 가장 높은 우선 순위를 가지며 공유 경계를 숨겨줍니다.

우선 순위의 다른 쪽 끝에서 border: none(또는 border-style: none)의 우선 순위가 가장 낮고 너비가 0 인 경계 (가장 좁은 경계이므로)입니다. 이 수단은 것으로 계산 값 의 border-style: none과 계산 값 의은 border-width: 0본질적으로 동일하다.

계단식 규칙 및 상속

이후 none및 0다른 속성 (영향 border-style과에게 border-width), 그들은 작동합니다 다른 때 보다 구체적인 규칙 을 정의 바로 스타일이나 단지 폭입니다. 예를 들어 Chris 답변 을 참조하십시오 .

라이브 데모 !

이 모든 사례를 한 페이지에보고 싶습니까? 라이브 데모를 엽니 다 !

— 데 닐슨 사 마이 아
소스

21

사용

border: none;

일부 IE 버전에서는 작동하지 않습니다. IE9는 괜찮지 만 이전 버전에서는 스타일이 "없음"인 경우에도 테두리가 표시됩니다. 입력 상자에 테두리를 원하지 않는 인쇄 스타일 시트를 사용할 때이 문제가 발생했습니다.

border: 0;

모든 브라우저에서 제대로 작동하는 것 같습니다.

— 키어런
소스

12

Oli가 친절하게 제공 한 사양에 따라 간단하게 사용할 수 있습니다.

나는 항상 사용 border:0 none;합니다.

별도로 지정해도 아무런 해가 없지만 레거시 CSS1 속성 호출을 사용하면 일부 브라우저에서 CSS를 더 빨리 구문 분석합니다.

비록 border:0;일반적으로 테두리 스타일이 기본값으로 사용됩니다 none, 내가 그러나 어떤 수 이상하게 덮어 쓰기 기본 테두리 스타일을 적용 일부 브라우저를 발견했습니다 border:0;.

— Xenni82
소스

"일부 브라우저는 CSS를 더 빨리 구문 분석합니다" → CSS 구문 분석 시간에는 눈에 띄는 차이가 없습니다. 그리고 실제로 CSS 구문 분석 시간은 99.999999999999 %와 관련이 없습니다. CSS 렌더링 시간이 훨씬 중요합니다 (이 질문과는 전혀 관련이 없음).

— Denilson Sá Maia

1

일부 브라우저? 무슨 소리 야? 꿈 같은 것 같습니다.

— Rootical V.

7

나는 사용한다:

border: 0;

CSS 2.1의 8.5.4 부터 :

'경계'

값 : [<border-width> || <테두리 스타일> || < '테두리 상단 컬러'>] | 상속

따라서 두 방법 중 하나가 잘 보입니다.

— 클레 투스
소스

1

점이없는 점은 점이없는 점과 같습니다

— Christopher Altman

1

진실. 그러나 Chris의 답변 참조

— Antony Hatchkins

5

음, 정확히 사이의 차이를 볼 수 border: 0및 border: none우리는 몇 가지 실험을 할 수 있습니다.

실험:

첫 번째는 너비를 0으로 설정하여 테두리를 비활성화 할 수 있고, 두 번째는 스타일을 없음으로 설정하여 비활성화 할 수있는 세 번째 div를 설정하고, 세 번째로 설정하면 "비활성화"할 수있는 테두리가있는 세 개의 div를 만들 수 있습니다. 투명하게 착색하십시오. 그런 다음 효과를 시도하십시오.

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>

스 니펫 확장

내 결과는 파이어 폭스와 크롬에서 동일했습니다.

border: 0;border-width를 0및 border-style을 none로 설정하지만 border-color를 변경하지 않는 것 같습니다 .

border: none;테두리 스타일 만 변경하는 것 같습니다 (~ none).

border: transparent;테두리 색상을 transparent테두리 스타일 로 변경하는 것으로 보입니다 none.

— 에이지 리 단 치그
소스

2

결과는 거의 같지만 (경계 없음) 0과 기술적으로 다른 것을 다루는 사람은 없습니다.

0은 테두리 너비를 나타내며 테두리 스타일은 없습니다. 분명히 너비가 0 인 테두리가 없으므로 스타일이 없습니다.

그러나 나중에 스타일 시트에서이를 재정의하려는 경우 자연스럽게 특정 주소를 지정할 수 있습니다. 이제 3px 테두리를 원한다면 너비와 관련하여 border : 0을 직접 재정의합니다. 내가 점선 테두리를 원한다면, 그것은 테두리를 직접 재정의하는 것입니다 : 스타일과 관련하여 아무도 없습니다.

— 칼리
소스

2

CSS로 테두리를 제거하는 가장 쉬운 방법

border: 0;

— 쿠마르 사랑
소스

-1

우리는 테두리 0을 사용해야합니다

내 의견과 경험에 따르면 Border : 0; 테두리를 사용할 때마다 유효하고 매우 좋은 이유가 있습니다. 없음, 작동한다고 이해하지만 테두리, 1px, 2px, 3px 등을 사용하고 있다고 생각합니다. 테두리가 ... px라는 값을 제공한다는 의미입니다. / em / rem이므로 테두리를 사용해야합니다 : 0; background를 사용할 때 알고 있듯이 border 값을 제거합니다. none; 다른 값이 아닌 배경을 제거한다는 의미입니다.

감사

— 비 노드 쿠마르
소스

-3

내 시점에서

border:none 작동하지만 유효하지 않은 w3c 표준

그래서 우리는 더 잘 사용할 수 있습니다 border:0;

— 각성
소스

6

에 대해 잘못된 것이 없습니다 border: none.

— Quentin