CSS에서 'property : 0'또는 'property : 0px'?


88

이 표기법이 많이 사용되는 것을 보았고,이 두 표기법 사이에 눈에 띄는 차이가 있는지 궁금합니다.

element#id
{
  property: 0;
}

element#id
{
  property: 0px;
}

나는 property: 0px;그것이 깨끗해 보이기 때문에 항상 사용 하지만 브라우저 0px0.

어느 것이 더 낫거나 올바른지 아는 사람이 있습니까?


1
좋은 질문이며이 중복 가능성보다 이전에 : stackoverflow.com/q/5359222/292060 이지만 사양을 인용하면 더 나은 대답이 있습니다.
goodeye

1
어떤 것을 사용하든 전체 프로젝트에서 일관성을 유지해야합니다.
PBwebD

답변:


56

단위 식별자는 선택 하지만, (당신이 있지만 더 저명한 성능 향상은 없습니다 되는 두 개의 문자를 저장).

CSS2 - 에서 W3C의 CSS 구문 2.1 사양 및 기본 데이터 유형 :

길이 값의 형식 (본 명세서에서 <length>로 표시됨)은 단위 식별자 (예 : px, em 등)가 바로 뒤 따르는 <숫자> (소수점 포함 또는 제외)입니다. 길이가 0이면 단위 식별자는 선택 사항입니다.

(강조 광산)

CSS3 - 에서 W3C의 CSS 값 및 단위 모듈 레벨 3 (현재의 후보 추천 이 글을 쓰는 시점에서)

길이 0 인 경우 단위 식별자는 선택 사항입니다 (즉, 구문 상 0으로 표시 될 수 있음).


1
GZIP 압축이 활성화되면 정말 2 바이트를 절약 할 수 있습니다. 그것은 당신이 편안하게 느끼는 문제입니다. 하지만 일부 CSS Linters는 0px를 싫어할 수 있습니다.
Manuel Arwed Schmidt

34

값이 0이면 단위는 선택 사항이지만 값을 클릭하고 위쪽 / 아래쪽 화살표 키를 눌러 Chrome의 개발자 도구로 값을 조정할 수 있으므로 그대로 두는 경향이 있습니다. 유닛 없이는 불가능합니다.

또한 CSS 축소 기는 0어쨌든 값 에서 단위를 제거 하므로 결국에는 실제로 중요하지 않습니다.


minifier가 이것에 대해 알고 있고 그것들을 포함함으로써 가질 기능이 있다는 것을 관찰하기 위해 +1.
Graham P Heath

9
식별자없이 0에서 위쪽 / 아래쪽 화살표 키를 누르면 Chrome의 개발자 도구가 기본적으로 px로 설정됩니다. 또한 Chrome의 개발자 도구에서 0으로 화살표를 내리면 px가 유지됩니다.
PBwebD

1
@ testing123 :이 답변을 작성했을 때 그랬다고 생각하지 않지만 알아두면 좋습니다.
Blender

응용 프로그램의 여러 위치에서 사용되는 경우 0 및 0px에 실행 시간 문제가 있습니까?
Kurkula

16

그들은 동일합니다. 브라우저는 둘 다 0으로 해석하므로 더 읽기 쉬운 것으로 이동하십시오.


'올바른'또는 표준 준수 선택이 있습니까? border: 3 solid단위가 없기 때문에 쓸 수 없다는 것을 알고 있지만 0에 대한 웹 표준이 있습니까?
Blender

1
내 대답에서 언급했듯이 그것은 모두 동일하기 때문입니다. 픽셀, em, ex 또는 백분율의 크기로 곱하든 상관없이 0 곱하기는 여전히 0입니다.
AgentConundrum

웹 표준이 의미하는 바는 확실하지 않지만 "margin : 10px 0 0 10px"는 잘 작동합니다. "border : 0"은 "none"에 해당하는 값으로 0을 사용할 수 있음을 의미합니다.
Tom

1
@blender 문서 링크가있는 웹 표준에 대한 내 대답을 아래에서 확인하십시오.
Chris Bier

3
-1 참조, 링크 또는 근거가없는 논쟁의 여지가있는 내용이 포함 된 답변입니다. 데이터로 귀하의 의견을 뒷받침하거나 사실 정보가 아닌 귀하의 의견 일뿐임을 분명히 밝히십시오.

11

0은 0입니다. 0px= 0%= 0em= 0pt=0

대부분의 사람들은 단순히 불필요한 어수선하기 때문에 장치를 꺼 둡니다.


1
예외가 시간 단위입니다 : 0있다 없다에 대한 유효한 대안 0s/0ms
헨릭 크리스텐슨

5

내가 아는 한 그들 사이에는 차이가 없습니다 0px = 0em = 0ex = 0% = 0. 당신이 가장 좋아하는 것을 결정하는 것은 개발자로서 순전히 당신에게 달려 있습니다 (물론 따라야 할 기업 코딩 표준이 없다면).

내가 본 대부분의 코드 샘플에서 대부분의 사람들은 단위없는 버전을 사용합니다. 나에게 그것은 단지 더 깨끗해 보인다. 상당한 양의 데이터를 푸시하는 경우 (예 : Google의 경우)이 2 바이트는 특히 스타일 시트에서 여러 번 반복 할 가능성이 높기 때문에 많은 대역폭을 추가 할 수 있습니다.


6
상당한 양의 데이터를 푸시하고 있다면 (예 : Google 인 경우)이를 수행하는 축소 도구를 사용하는 것이 좋습니다. p
John Kurlak

4

0 픽셀은 0 인치 및 0 미터와 같습니다. 0필요한 것은 전부입니다.


잠시 동안 나는 0 픽셀이 0 인치와 같다는 당신의 진술이 거짓이라고 생각했기 때문에 당신의 게시물에 반대표를 던졌습니다. :) 내 마음 속으로 그게 어떻게 될 수 있다고 생각했기 때문에? 그들은 다른 단위입니다.
Web_Designer 2011 년

2

나는 개인적으로 찾아 0보다 청소기를 0px. 추가 할 수있는 두 개의 추가 문자입니다. 필요하지 않을 때 추가 바이트를 추가하는 이유. 나는 padding: 0px 0px 0px 0px쉽게 표현할 수있는 것을 padding: 0너무 자주 보았다 .


1

둘 중 하나를 사용할 수 있습니다. 저의 가장 좋은 조언은 너무 많이 걱정하지 말고 어느 쪽이든 일관성을 유지하는 것입니다. 개인적으로 다음과 같은 이유로 '0px'를 지정하는 것을 선호합니다.

  • 0px를 사용하면 지정한 다른 모든 'px'크기와 더 일관성이 있습니다.
  • 또한 더 장황하고 'switch this off'플래그보다 길이를 0으로 설정하고 있음을 매우 분명하게합니다.
  • 필요한 경우 '0px'값을 조정하여 다른 값으로 만드는 것이 약간 더 쉽습니다.

0

다른 사람들이 말했듯이 0인지는 중요하지 않지만 모든 값에 측정 값을 추가하여 내 CSS 파일을 보는 다른 사람이 다른 곳에서 처리 할 수있는 측정 값을 측정 할 수 있습니다.


0

와 사이에 차이가 없어야한다는 것을 알고 있지만 가끔 .0px0

나는 다음과 같은 물체를 중앙에 배치하려고했습니다.

position: absolute;
left: max(0px, calc((100vw - 400px)/2));
max-width: 400px;   

그것은 작동하지만 대체 할 경우 0px0그것을하지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.