html/css의 이상한 테두리 간격

겹쳐서 표시된 항목 위에 보이는 두꺼운 경계 막대가있는 가로 메뉴를 만들려고합니다. 그러나 어떤 이유로 파이어 폭스와 크롬의 바 오른쪽 끝에 약간의 간격이 있습니다. 이상하게도, IE는 그 차이가없이 그것을 보여줍니다. 방화 광케이블은 이러한 차이에 대한 어떠한 이유도 나타내지 않습니다.html/css의 이상한 테두리 간격

간단한 div를 사용해 보았지만 여전히 나타납니다. div로만 단일 HTML 샘플로 추출했습니다.

누구든지 이것을 설명하고 그 차이를 없애는 방법을 알려줄 수 있습니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Weird border spacing</title> 
    <style type="text/css"> 
    div.outer 
    { 
     border-top: dotted 1px lime; 
     margin: 10px; 
    } 

    div.outer div 
    { 
     display: inline; 
     margin: 0; 
     padding: 0 12px; 
     border-left: solid 1px silver; 
     border-top: solid 3px red; 
    }   
    </style> 
</head> 
<body> 
    <div class="outer"> 
     <div>First</div> 
     <div>Second</div> 
     <div>Third</div> 
    </div> 
</body> 
</html>

출처

2009-05-24 netgirlk

display:inline은 거의 작동하지 않습니다. 대신 float:left을 사용해보십시오.

출처

2009-05-24 15:30:12 Oli

감사합니다. – netgirlk

추가보십시오 :

body { 
    margin: 0; 
    padding: 0; 
}

브라우저가이 CSS 속성에 대한 다른 기본값이 있습니다.

출처

2009-05-24 15:30:53

나는 자신이'* {margin : 0px; padding : 0px} '로 표시됩니다. 브라우저가 결정을 내리지 않게하십시오. –

@alan thats 절대 좋은 생각. 간단하게 초보자가 고쳐서 나중에 문제를 일으킬 것입니다. 당신은 그것을 바꾸는 것을 고려하고 싶을 것이다. – corymathews

선택자 에 대한 선언은 display: inline-block 일 수 있습니다.

출처

2009-05-24 15:36:21 SpliFF

다시 말하지만, 이것은 상당히 예측할 수없는 구현 방식을 가지고 있습니다. 필자는 IE의 두 주요 버전이 동일하다고 생각하지 않습니다. 플로팅은 훨씬 더 표준화되었습니다. – Oli

인라인 블록은 많은 브라우저에서 지원되지 않습니다. – corymathews

간격은 <div> 사이의 줄 바꿈/줄 바꿈으로 인해 발생합니다. 이 문제를 해결하려면 <div>을 공백없이 같은 줄에 넣으십시오. 그러나 CSS를 다시 생각해 볼 것을 권합니다. <ul>

출처

2009-05-24 15:49:46 Andrew

정렬되지 않은 목록을 사용했지만 동일한 간격이 있었고 div가있는 샘플을 만들어 목록의 모든 문제를 제거하려고했습니다. 모든 ul 항목을 한 줄에 모으지 않고 공간을 없애는 방법이 있습니까? – netgirlk

나는 내부 div가 내부에 있도록하는 이상한 간격과 외부 div를 고정하고 왼쪽 div를 떠있었습니다. 필요에 맞게 스타일을 조정할 수 있습니다.

div.outer{border-top: 1px dotted lime;margin: 10px;float:left;} 
div.outer div 
{ 
    float:left; 
    margin: 0; 
    padding: 0 12px; 
    border-left: 1px solid silver; 
    border-top: 3px solid red; 
}

div 사이의 새 줄을 제거하여 공백 만 수정할 수도 있습니다.

출처

2009-05-24 15:51:57 mattphp

올리 (Oli)는 똑같은 제안을 일찌감치 제시했기 때문에 그의 대답을 정답으로 표시했습니다. 그래도 고마워. 내가 15 + rep를 얻으면 나는 그것을 투표 할 것이다 ;-) – netgirlk

공간을 확보하는 이유는 공백을 렌더링 할 것으로 해석하는 인라인 요소 때문입니다. 이렇게하면 다음을 수행 할 수 있습니다.

Hello World

여전히 2 개의 별개 단어가 있습니다. 공간을 제거하려면 ... 공간을 제거하십시오. 앞서 언급 한 것처럼 레이아웃을 위해 요소를 함께 플러시하려고 할 때 float : left를 사용하는 것이 선호되는 옵션입니다.

출처

2009-05-24 15:59:59 jvenema

답변

관련 문제