-webkit-margin은 텍스트에 원하지 않는 여백을 추가합니다.

-webkit-margin은 텍스트에 원하지 않는 여백을 추가합니다.

---

이것은 지금까지 저를 때리지 않았습니다 (웹킷 브라우저에서만 그런 것이 아닙니다). p태그, h1태그 등과 같은 모든 텍스트 에는 텍스트 위와 아래에 추가 공간이 있습니다.

크롬에서 나는 이것을 발견했다 :

사용자 에이전트 스타일 시트

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

이로 인해 일부 위치에서 정렬이 잘못됩니다. 그리고 예, 재설정 스타일 시트를 사용하고 있으며 패딩이나 여백이 추가되지 않았습니다. 거의 기본 설정입니다. 이것이 왜이며 어떻게 해결합니까?

---

다음과 같이 해당 속성을 직접 수정할 수도 있습니다.

-webkit-margin-before:0em;
-webkit-margin-after:0em;

Chrome / Safari에서 나를 위해 작동합니다. 도움이 되었기를 바랍니다.

---

이 -webkit-margin(들)은으로 덮어 씁니다 margin: 0; padding: 0;. 그들에 대해 걱정하지 마십시오.

추가 공간? 아마 당신은 설정 line-height:했습니까?

---

나는 같은 문제가 있었다. Firefox에서는 올바르게 표시되지만 Chrome에서는 표시되지 않습니다.

http://meyerweb.com/eric/tools/css/reset/을 자세히 살펴본 결과 내 스타일 시트에서 body 태그에 대한 일반적인 줄 높이를 선언하지 않았 음을 발견했습니다. 1.2로 설정하면 두 브라우저에서 올바른 레이아웃이 다시 생성됩니다.

---

태그 사이의 공백을 제거하십시오.

<p id="one"></p>
<p id="two"></p>

된다 :

<p id="one"></p><p id="two"></p>

---

나는 같은 문제가 있었다. 메뉴 링크 사이에 추가 공간. 위의 솔루션 중 어느 것도 작동하지 않았습니다. 나를 위해 일한 것은 마이너스 마진이었습니다. 다음과 같이하십시오.

margin: 0 -2px;

새로운 편집 :

이것은 -webkit-margins와 관련이 없습니다. 인라인 요소에서 문제가 발생할 가능성이 큽니다. 이는 인라인 요소 사이에 공백이나 줄 바꿈이 있기 때문에 발생합니다. 이 문제를 해결하려면 여러 옵션이 있습니다.

• 인라인 요소 사이의 모든 공백과 줄 바꿈 제거
• 요소 닫기 태그 건너 뛰기-예 </li>(HTML5는 상관 없음)
• 마이너스 마진 (위에서 언급했듯이-IE6 / 7의 문제-누가 신경 쓰고, 업그레이드하는지;)
• 집합 font-size: 0;문제 라인 요소는 컨테이너 (로이드와 경우에 문제가 폰트 크기와 EMS)
• 인라인을 포기하고 float를 사용하십시오 (이렇게하면 text-align : center를 풉니 다).

더 구체적으로 설명하고 CHRIS COYIER의 예

---

내 <h3>태그 와 동일한 문제가 발생했습니다 . 설정을 시도했지만 margin:0;작동하지 않았습니다.

나는 습관적으로를 사용하여 내 CSS의 줄을 주석 처리하고 있음을 발견했습니다 //. 전에는 문제가 없었기 때문에 알아 차리지 못했습니다. 그러나 //선언하기 전에 줄에서 사용 <h3>하면 브라우저가 선언을 완전히 건너 뛰었습니다. 내가 밖으로 거래 때 //를 위해 /**/나는 여백을 조정 할 수 있었다.

이 이야기의 도덕 : 항상 적절한 주석 구문을 사용하십시오!

---

저에게 사진은 다음과 같습니다.

* {margin:0;padding:0;}

파이어 폭스 (FF)와 구글 크롬은 모두 0.67em의 마진을두고 있습니다. FF는 기본 여백을 표시했지만 줄이 그어져 있지만 어쨌든 적용했습니다. GC는 기본 여백 (-webkit-margin-before ...)을 교차하지 않은 것으로 표시했습니다.

지원 했어

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

그러나 GC는 이제 기본 마진을 넘어 섰지 만 아무 소용이 없습니다.

어느 쪽이든 신청할 수 있다는 것을 알았습니다.

line-height: 0;

또는

font-size: 0;

원하는 효과를 얻을 수 있습니다. 이것은 마진이 .67em 유형이라고 가정하면 의미가 있습니다. 누구든지 설명을 줄 수 있다면, 왜 브라우저가 줄 높이 의존적이고 제거 불가능한 여백을 적용하여 우리의 삶을 비참하게 만드는지, 정말 감사 할 것입니다.

---

Chrome에서 나를 위해 padding-start이것을 일으키는 것은 약 40px 였습니다. 나는 다음과 같이 일했다.

ul {
    -webkit-padding-start: 0em;
}

---

    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

이것은 내가이 정확한 문제를 겪었을 때 나를 위해 그것을 해결했습니다.

---

I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:

table td
{
    vertical-align: top;
}

Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.

I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)

Take care!

---

If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.

Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".

Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.

참고URL : https://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts