우리는 다음과 같은 몇 가지 규칙과 CSS 파일이 있습니다CSS 여백을 픽셀 단위로 정의해야합니까? 왜? 언제?
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
모든 것이 확인 노력을하지만, 우리는 여백 정상 값 사이의 불일치에 대해 구체적으로 생각하는 사람도있을 것입니다. 하나는 20 픽셀이고 다른 하나는 1em입니다.
어느 것이 가장 좋습니다. 사용할 것을 결정할 때 고려해야 할 요점은 무엇입니까? 감사.
em 단위는 요소의 크기가 페이지의 배율에 따라 달라질 때 페이지의 확장 성을 높이기 위해 사용됩니다. 예전의 브라우저 (예 : IE6) 및 모바일 플랫폼에서 특히 중요합니다.
px 단위는 절대 값으로 사용되고, em은 특정 요소의 글꼴 크기에 상대적입니다. 1em은 하나의 글꼴 줄을 의미합니다. 당신은 당신이 정확한 값을 알고 있기 때문에 px 쉽게 보인다 사용 1em은 12px 또한
동일된다는 것을 의미 글꼴 크기 12px와 상자를 가지고 있지만, em 단위는 컨테이너의 값을 상속합니다. 이 경우
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
<p> 기본적인 폰트 크기 * 1.2 동일한 폰트 크기를 가질 것이고, 상기 제
<p> 폰트 크기 1.2 * 1.2 *로 표시된다.
두 가지 측정 방법이 있습니다. Em은 글꼴 크기에 연결됩니다 (전통적으로 1em은 주어진 서체에서 문자 M의 너비 임). px는 픽셀입니다.
em을 사용하여 모든 것을 빌드하면 사용자가 글꼴 크기를 조정할 때 (예 : IE의 Page> Text Size 메뉴를 사용하여) 모든 것이 확장됩니다. 또한 work to a vertical rhythm을 쉽게 만듭니다.
픽셀은 "픽셀 완전"무언가를 만들고 싶을 때 더 좋습니다. CSS 픽셀은 화면 픽셀과 항상 같지는 않습니다. 주로 현대의 브라우저와 휴대 기기에서 확대/축소가 가능하기 때문입니다. 일반적으로 페이지 전체가 그에 맞게 조정되므로 문제는 아닙니다.
무엇을 하든지간에 일관성을 유지하십시오. 나중에 훨씬 쉽게 사용할 수 있습니다.
또한 깊이 가이드 여기에서 매우 좋은 :
EMS 구성 유닛은 브라우저에서 현재의 폰트 크기에 상대적이다. 따라서 사용자가 글꼴 크기 *를 늘리거나 CSS에서 요소의 글꼴 크기를 변경하면 여백은 텍스트에 비례하여 여전히 "올바르게"보입니다.
* (당신이 사용하는 경우이 사용자 대신 지금은 파이어 폭스와 크롬의 기본이기 때문에 (텍스트 크기를 증가의 페이지를 확대하면 문제가 중단, 그리고 IE의 옵션).
입니다 설정된 수의 픽셀을 뭔가 다른 위치에 배치하는 여백을 설정하면 픽셀을 분명히 사용해야합니다.
이 예에서 directory-result ul은 블록을 나타냅니다. 픽셀 크기가 중요한 일종의 목록/메뉴입니다. 텍스트 크기를 정의하는 em을 항상 신뢰할 수있는 것은 아닙니다. 배경 이미지로 인해 20px 공간이 필요하다면 20px가 필요하기 때문에 타협하지 않아도됩니다.
이미지를 만들고 저장할 수 없다는 점에 유의하십시오. 따라서 웹 페이지에서 다른 단위를 사용해야하는 이유가 없습니다. 혼란이 생기고 나중에 레이아웃을 유지하는 것이 매우 어렵습니다.
한 곳이 있는데, em을 사용하는 것이 좋습니다 - 텍스트 블록에 대해 이야기하고 있습니다. 나는 당신의 코드에서 짐작하고있다. about-text은 1em (텍스트의 높이)의 위쪽/아래쪽 여백을 추가하는 것이 타당한 다른 텍스트 안에 배치된다. 모든 텍스트 편집기 (예 : MS Word의 줄 간격)와 비슷합니다. 텍스트 사이의 간격을 텍스트의 높이에 곱하여 정의 할 때 텍스트가 가장 적합합니다.
제 생각에는 디자인을 다루는 모든 곳에서 이미지를 사용합니다. 픽셀로 측정 된 기본값 - 모든 채우기/여백에 pixels을 사용하십시오.
텍스트 블록 내에서 텍스트를 처리하고 텍스트 노드 사이에 공백을 추가하려는 모든 곳에서는 em을 사용하십시오.
예에서 글꼴 크기를 지정하지만 OP가 요청할 때 여백은 지정하지 않습니다. – cfx