이러한 인라인 블록 디비 요소 사이에 설명할 수 없는 차이가 있는 이유는 무엇입니까?

이러한 인라인 블록 디비 요소 사이에 설명할 수 없는 차이가 있는 이유는 무엇입니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

인라인/인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? (41개 답변)

마감됨3년 전에.

두 개의 인라인 블록이 있습니다.div동일한 요소가 서로 옆에 배치됩니다.하지만 마진이 0으로 설정되었음에도 불구하고 두 div 사이에는 4픽셀의 신비한 공간이 있는 것 같습니다.그들에게 영향을 주는 부모 디브가 없습니다. 무슨 일입니까?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

제가 원하는 모습은 다음과 같습니다.

이 경우, 당신의div요소가 에서 변경되었습니다.block요소를 에 수평으로 맞추다.inline요소들.의 일반적인 특성inline요소는 마크업에서 공백을 존중한다는 것입니다.이것은 왜 요소들 사이에 간격이 발생하는지 설명합니다.(계속)

이 문제를 해결하는 데 사용할 수 있는 몇 가지 솔루션이 있습니다.

방법 1 - 마크업에서 공백 제거

예제 1 - 빈칸에 주석 달기: (예)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

예제 2 - 줄 바꿈 제거: (예)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

예제 3 - 다음 줄에서 태그의 일부를 닫습니다(예).

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

예 4 - 다음 줄에서 전체 태그 닫기: (예)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

방법 2 - 재설정font-size

사이에 공백이 있기 때문에inline요소는 다음에 의해 결정됩니다.font-size간단히 재설정할 수 있습니다.font-size로.0따라서 요소 사이의 공간을 제거합니다.

설정하기font-size: 0상위 요소에서 새 항목을 선언font-size어린이용입니다.이는 여기에 설명된 것처럼 작동합니다(예).

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

이 방법은 마크업을 변경할 필요가 없기 때문에 매우 잘 작동하지만 하위 요소의 경우에는 작동하지 않습니다.font-size다음을 사용하여 선언됩니다.em단위. 따라서 마크업에서 공백을 제거하거나 요소를 플로팅하여 생성된 공간을 피하는 것이 좋습니다.inline요소들.

방법 3 - 부모 요소를 다음으로 설정합니다.display: flex

경우에 따라 다음을 설정할 수도 있습니다.display의 모체인.flex(계속)

이렇게 하면 지원되는 브라우저에서 요소 사이의 공백이 효과적으로 제거됩니다.추가 지원을 위해 적절한 공급업체 접두사를 추가하는 것을 잊지 마십시오.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

---

측면 참고:

마이너스 마진을 사용하여 사이의 공간을 제거하는 것은 믿을 수 없을 정도로 신뢰할 수 없습니다.inline해결책이 .다른 최적의 솔루션이 있다면 마이너스 마진을 사용하지 마십시오.

용사를 합니다.inline-blockHTML에서 공백을 허용합니다. 이는 일반적으로 .25em(또는 4px)과 같습니다.

공백을 주석으로 표시하거나 더 일반적인 솔루션으로 부모의 작업을 설정할 수 있습니다.font-size0으로 설정하고 인라인 블록 요소에서 필요한 크기로 다시 재설정합니다.

현재로서는 다소 구식이지만 쉬운 해결책은 다음과 같습니다.float 용예기(:):float: left;참고로, ) 다른참로고각, 각▁)각각다id. 즉,한 유야합다를 수 . 즉, 동게사수없습니다용할하니일고해없다▁should니습수,즉사▁unique▁the,▁be.id 두번에 두 번.HTML문서.다음을 사용해야 합니다.class대신, 당신이 그것을 사용할 수 있는 곳.class다중 요소에 대해.

.container {
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

이전 브라우저에서는 Flex가 작동하지 않기 때문에 Flex를 사용하지 않는 솔루션을 찾았습니다.예:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

.2px solid #e60000CSS.div CSS에 추가합니다.

확실히 효과가 있습니다.

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

추가해야 합니다.

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

왜냐하면 당신이 글을 쓸 때마다display:inline-block은 추가적인 필니합다요가 합니다.margin-right:4px그래서 그것을 제거해야 합니다.

언급URL : https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements