단어 시작 부분에 공백을 제거하는 방법은 무엇입니까?

Question

내 h1 태그 시작 부분에 공백을 제거하려고합니다. 첨부 된 스크린 샷을 참조하십시오. 나는 h1 태그를 파란색으로 강조 표시하여 문구의 시작 부분에 여분의 공간을 볼 수 있습니다. 그것은 약 1 또는 2 픽셀에 해당합니다. 공간은 마진 또는 패딩이 아닙니다. 페이지의 나머지 요소를 제거 했으므로이 공간은 h1 요소의 공간입니다. 이 공간은 무엇이 될 수 있습니까? 어떻게 제거 할 수 있습니까?

는 UPDATE : 문제는 HTML 마크 업의 몸에 패딩 때문이 경우 예제 코드

Answer 1

각 문자 앞에 공백이 수직 은색 거의 확실이 렌더링하는 데 사용하는 글꼴의 특성 <h1> 텍스트. 글꼴 디자이너는 문자의 끝에 일부 공간을두고 시작 부분에 일부 공간을 배치하여 문자 간 간격을 관리합니다. 그들은 전형적으로 정당화 된 선의 시작과 끝에서의 광학 (안구) 정렬과 잘 균형 잡힌 단어 간 간격을 위해 이것을 최적화합니다.

제거해야하는 경우 시도해 볼 수있는 몇 가지 사항이 있습니다.

1. 음수 추적. 작은 부정적인 CSS letter-spacing 속성 (예 : .05em)을 사용해보세요. 이것은 당신의 인물을 조금 더 밀착시킬 것입니다. 이 효과로 미묘하게 표현하십시오.

2. 굵은 글씨체로 선택하십시오. 글꼴 디자이너는 종종 중심선에 대해 대칭으로 획을 두껍게하여 글꼴을 굵게 표시합니다. 이것은 선행 공백의 약간을 먹을 수 있습니다.

3. 마지막 수단으로 텍스트를 그래픽 (png 또는 gif)으로 렌더링 한 다음 가장자리를 잘라냅니다. 이것은별로 좋지 않습니다.

Answer 2

이 jsFiddle를 참조하십시오.

추가하면 삭제됩니다.

body{ 
margin:0px; 
padding:0px; 
} 

전체 코드 없이는 이것이 해결책이 될지 여부를 판단 할 수 없습니다.

http://jsfiddle.net/jU43x/5/

Answer 3

H1의 태그에 margin-left: -3px;를 추가하면이 문제를 해결합니다 : demo

h1 { 
font-family: 'Roboto Condensed', sans-serif; 
margin: 0; 
padding: 0; 
line-height: 1.2; 
font-size: 97px; 
margin-left: -3px; 
} 

Answer 4

@OllieJones의 분석은 정확합니다. 글꼴 디자인의 세부 사항을 다루고 있습니다. 결과적으로 특정 상황에서 글꼴 디자이너가 일부 결정을 취소하려고합니다. 거기에는 일반적인 메커니즘이 없습니다.

당신이 할 수있는 일은 콘텐츠를 왼쪽으로 옮기는 것입니다. 이동의 정도는 특정 글꼴 속성과 관련된 문자에 따라 다릅니다. 주어진 경우 5px의 이동은 왼쪽 가장자리에 대해 "C"를 푸시합니다. 그러나 첫 글자가 다른 것이라면 너무 많이 밀려날 것입니다. 서로 다른 글자는 글꼴 디자인에서 서로 다른 간격을두고 있습니다.이 수

<style> 
h1 > span { 
    display: block; 
    margin-left: -5px 
} 
</style> 
<h1><span>Covered with grass then detained</span></h1> 

는 h1 요소에 대한 일반적인 스타일을 사용

콘텐츠는 보조 마크 업 및 음의 여백을 사용하여, 위치 또는 아마도 안전을 사용하여 이동 할 수 있습니다. 예를 들어 테두리를 그릴 경우 문자 "C"가 테두리를 터치합니다. 나는 이것을 당신이 원하는 것으로 추정한다 (인쇄상의 오류 일지라도). 또는 h1 요소를 음수 왼쪽 여백을 설정하여 왼쪽으로 이동하십시오.