디스플레이: 인라인과 디스플레이: 인라인 블록의 차이점은 무엇입니까?

디스플레이: 인라인과 디스플레이: 인라인 블록의 차이점은 무엇입니까?

정확히 무엇이 다른가요?inline그리고.inline-blockCSS 값display?

시각적 답변

상상해 보세요<span>내부 요소<div>만약 당신이 그것을 준다면.<span>예를 들어, 요소 높이가 100m이고 빨간색 테두리가 있습니다. 이것은 다음과 같이 보입니다.

표시: 인라인

표시: 인라인 블록

표시: 블록

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

포함된 요소display:inline-block와 같은display:inline요소. 그러나 너비와 높이를 가질 수 있습니다.즉, 인라인 블록 요소를 텍스트 또는 다른 요소 내에서 흐름하면서 블록으로 사용할 수 있습니다.

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

• 인라인: 전용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;기본적으로, 그것은 문장도 문장도 아니기 때문에, 그것은 문장의 블록입니다.

다음을 포함하는 요소display: inline; 을 가질 수 없습니다.height또는width또는 수직margin다음을 포함하는 요소display: block; 을 가질 수 있습니다.width,height그리고.margin.
추가할 경우height에게<em>요소, 이 요소를 다음으로 설정해야 합니다.display: inline-block;이제 추가할 수 있습니다.height요소 및 다른 모든 블록 스타일(더block의 일부inline-block), 하지만 그것은 문장 안에 놓입니다 (The.inline의 일부inline-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 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

그img가지다display: inline그러나 그것은width그리고.height설정되었습니다.

스플래트네의 대답은 아마 거의 모든 것을 다루었을 것입니다. 그래서 저는 같은 것을 반복하지 않을 것입니다. 하지만:inline그리고.inline-block에 대해 다르게 행동합니다.directionCSS 속.

다음 스니펫 내에서 확인할 수 있습니다.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>

하지만, 만약 내가 계속해서 설정한다면,displayinline-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>

저는 이것에 대한 다른 특이점이 있는지 모르겠습니다. 저는 이것에 대해 경험적으로 크롬에서만 발견했습니다.

인라인 요소

1. 좌우 여백과 패딩을 존중해야 합니다.위/아래가
2. 너비 또는 높이를 설정할 수 없습니다.
3. 다른 요소를 왼쪽과 오른쪽에 배치합니다.

인라인 블록 요소:

1. 여백과 패딩에 대해 모든 면을 존중합니다.
2. 너비와 높이를 설정할 수 있습니다.
3. 다른 요소를 왼쪽과 오른쪽에 배치합니다.

블록 요소:

1. 여백 및 패딩에 대해 모든 면을 존중합니다.
2. 전체 너비 획득(폭이 정의되지 않은 경우)
3. 줄 바꿈을 강제로 수행합니다.

시각적인 예는 다음과 같습니다.

추가 시각화 예제를 보려면 아래의 스니펫을 확인하십시오.

.block{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.inline-block{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
.inline{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline;
}

<div class="block">
block
</div>
<div class="block">
block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline">
inline
</div>
<div class="inline">
inline
</div>

블록 - 요소 take complete width.All properties height , width, margin , padding work

인라인 - 요소 take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.

인라인 블록 - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.

언급URL : https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block