디스플레이 : 인라인 vs 디스플레이 : 블록

다음 CSS의 기본 차이점은 무엇입니까?

display:inline

이:

display:block

요소에서 별도로 사용하면 동일한 결과를 얻습니다.

display : block 은 단락과 헤더가 항상 그렇듯이 요소가 블록으로 표시됨을 의미합니다. 블록은 위와 아래에 약간의 공백이 있으며 다른 순서로 주문 된 경우를 제외하고 (예 : 다른 요소에 float 선언을 추가하여) HTML 요소를 허용하지 않습니다.

표시 : 인라인 은 요소가 현재 블록 내부의 동일한 라인에 인라인으로 표시됨을 의미합니다. 두 블록 사이에있을 때만 요소가 '익명 블록'을 형성하지만 가능한 가장 작은 너비를 갖습니다.

표시 옵션에 대한 자세한 내용은 http://www.quirksmode.org/css/display.html을 참조하십시오.

블록

전후에 새 줄을 표시하여 사용 가능한 전체 너비를 차지합니다 (display : block;).

인라인

필요한만큼만 너비를 차지하고 새 줄을 강제하지 않습니다 (display : inline;).

display: block -요소 앞뒤의 줄 바꿈

display: inline -요소 앞뒤에 줄 바꿈 없음

비교표는 다음과 같습니다.

여기에서 예제 를 볼 수 있습니다 .

display: block;생성 블록 레벨 반면 소자 display: inline;생성 인라인 레벨 요소. CSS 상자 모델에 익숙하지 않은 경우 차이점을 설명하기가 약간 어렵지만 인라인 요소는 그렇지 않지만 블록 수준 요소 는 문서 의 흐름 을 손상 시킨다고 말하는 것으로 충분합니다 .

블록 레벨 요소의 몇 가지 예는 다음과 같다 : div, h1, p, 및 hrHTML 태그입니다.

인라인 레벨 요소의 몇 가지 예는 다음과 같다 : a, span, strong, em, b, 및 iHTML 태그입니다.

개인적으로 저는 인라인 요소를 인쇄상의 요소 로 생각하고 싶습니다 . 이것은 완전히 또는 기술적으로 정확하지는 않지만 대부분의 경우 인라인 요소는 텍스트와 매우 유사하게 작동합니다.

여기 에서 주제에 대한 기사를 자세히 읽을 수 있습니다 . 이 글타래의 다른 사람들이 인용했을 때 읽을 가치가 있습니다.

디스플레이 : 블록 은 줄 바꿈없이 전체 줄을 가져갑니다.

Display : inline 은 필요한 정확한 공간 만 차지합니다.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

이 바이올린 http://jsfiddle.net/RJXZM/1/ 에서 예제를 참조 할 수 있습니다 .

블록 요소는 부모를 채우도록 확장됩니다.

인라인 요소는 자녀를 수용 할 수있을 정도로 커야합니다.

디스플레이 : 블록

화면의 전체 행 (100 %)을 취합니다. 항상 화면 크기의 100 %입니다.

디스플레이 블록 예

전시 : 인라인 구획 은 필요한만큼 폭을, 스크린 크기의 1 %에서 100 % 일 수 있습니다

인라인 블록 표시 예

그래서 우리는 div와 span이 있습니다.

사업부 기본 스타일은 디스플레이 블록입니다 : 그것은 화면의 전체 너비를 가져옵니다

span 기본 스타일은 display : inline block : span은 새 줄에서 시작하지 않고 필요한만큼만 폭을 차지합니다.

요소에 배경색을 추가하면 다른 포스터에서 설명한 것처럼 인라인과 블록의 차이점을 멋지게 볼 수 있습니다.

Display : block 'p'태그와 같은 방식으로 동작하며 행 전체를 차지하며 플로팅 될 때까지 옆에 어떤 요소도있을 수 없습니다. Display : inline 필요한만큼의 공간 만 사용하고 다른 요소를 나란히 정렬 할 수 있습니다.

양식의 경우 이러한 속성을 사용하면 더 잘 이해할 수 있습니다.

블록 또는 인라인 블록은 너비를 가질 수 있지만 (예 : 너비 : 400px) 인라인 요소는 너비의 영향을받지 않습니다. 인라인 요소는 텍스트의 다음 줄로 확장 될 수 있지만 (예 : http://codepen.io/huijing/pen/PNMxXL 은 브라우저 창의 크기를 조정하여 볼 수 있음) 블록 요소는 할 수 없습니다.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

블록 요소 : div, p, 좋아하는 요소는 블록 레벨입니다. 새 줄에서 시작하여 부모 요소의 전체 너비를 차지합니다. 인라인 요소 : b, i, span, img를 좋아하는 요소는 인라인 레벨입니다. 그들은 새로운 줄에서 시작하지 않고 내용의 폭을 차지합니다.

기본적으로 인라인 요소는 문서 흐름에서 새 줄을 강제로 시작하지 않습니다. 블록 요소는, 다른 한편으로는, 일반적으로는 참조 할 수 있습니다 발생하는 줄 바꿈의 원인 이 링크를