[css] display : inline과 display : inline-block의 차이점은 무엇입니까?

Program / 글쓴이

CSS의 값 inline과 inline-block값의 차이점은 정확히 무엇입니까 display?

답변

시각적 인 답변

<span>안에 요소가 있다고 상상해보십시오 <div>. 당신이주는 경우에 <span>요소를 100 픽셀의 높이와 예를 들어 빨간색 테두리, 그것은과 같이 표시됩니다

디스플레이 : 인라인

디스플레이 : 인라인

디스플레이 : 인라인 블록

디스플레이 : 인라인 블록

디스플레이 : 블록

여기에 이미지 설명을 입력하십시오

코드 : http://jsfiddle.net/Mta2b/

요소 display:inline-block는 요소와 비슷 display:inline하지만 width 와 height를 가질 수 있습니다 . 즉, 인라인 블록 요소를 텍스트 나 다른 요소 내로 이동시키면서 블록으로 사용할 수 있습니다.

지원되는 스타일의 차이점 요약 :

  • 인라인 : 단지 margin-left, margin-right, padding-left,padding-right
  • 인라인 블록 : margin, padding, height,width

답변

display: inline;문장에서 사용할 표시 모드입니다. 예를 들어 단락이 있고 한 단어를 강조 표시하려면 다음을 수행하십시오.

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>요소는있다 display: inline;이 태그는 항상 문장에서 사용되기 때문에, 기본적으로. <p>요소는있다 display: block;가 문장이나 문장에서,이 문장의 블록의도이기 때문에, 기본적으로.

가있는 요소 는 a 또는 a 또는 vertical를 가질 display: inline; 수 없습니다 . 와 요소는 수 이 , 그리고 .
당신이를 추가하려면 받는 요소, 당신은이 요소를 설정해야합니다 . 이제 요소와 다른 모든 블록 스타일 (의 일부 ) 에 a 를 추가 할 수 있지만 문장 (의 일부 )에 배치됩니다 .heightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

답변

답변에 언급되지 않은 한 가지 사항은 인라인 요소가 줄 사이에서 끊어 질 수 있지만 인라인 블록은 할 수 없으며 분명히 차단되지 않는다는 것입니다! 따라서 인라인 요소는 텍스트와 블록의 문장 스타일을 지정하는 데 유용 할 수 있지만 채울 수 없으므로 대신 줄 높이 를 사용할 수 있습니다 .

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

스 니펫 확장

여기에 이미지 설명을 입력하십시오

답변

위의 모든 답변은 원래 질문에 대한 중요한 정보를 제공합니다. 그러나 잘못된 것처럼 보이는 일반화가 있습니다.

그것은 가능하다 세트 폭 (내가 생각할 수있는) 적어도 하나 개의 인라인 요소에 높이 – <img>요소입니다.

여기 와이 중복 상태 에서 답변을 수락 했지만 이것이 불가능하지만 유효한 일반 규칙처럼 보이지는 않습니다.

예:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

스 니펫 확장

는 img있다 display: inline, 그러나 그것 width과는 height성공적으로 설정되었다.

답변

splattne의 대답은 아마도 대부분의 것을 다루었으므로 동일한 것을 반복하지는 않지만 CSS 속성 inline과 inline-block다르게 동작 direction합니다.

다음 스 니펫 내 one two에서 LTR 레이아웃에서와 같이 (순서대로) 렌더링됩니다. 여기의 브라우저가 영어 부분을 LTR 텍스트로 자동 감지하여 왼쪽에서 오른쪽으로 렌더링했다고 생각합니다.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

스 니펫 확장

내가 가서 설정된 경우, display에 inline-block, 브라우저는 존중 나타납니다 direction그 때문에, 재산을 순서대로 오른쪽에서 왼쪽으로 요소를 렌더링 two one렌더링됩니다.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

스 니펫 확장

이것에 대한 다른 단점이 있는지 모르겠지만 Chrome에서 경험적으로 만 발견했습니다.

답변