CSS에서 inline-block은 인라인 요소와 블록 요소의 특성을 모두 갖는 "인라인 블록 요소"를 의미하며, 인라인 블록 요소는 다른 요소와 같은 줄에 있을 수 있으며 높이, 너비, 줄 높이가 있습니다. , 위쪽 및 아래쪽 여백을 모두 설정할 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

block

블록 수준 요소의 특징:

1. 각 블록 수준 요소는 새 줄에서 시작되고, 후속 요소도 새 줄에서 시작됩니다. (정말 횡포합니다. 하나의 블록 수준 요소가 한 행을 차지합니다.)

2. 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다.

3. 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).

,

,

,

,

및
• 는 블록 요소의 예입니다.

inline

인라인 요소의 특징:

1. 요소의 높이, 너비, 위쪽 및 아래쪽 여백을 설정할 수 없습니다. 요소의 너비는 포함된 텍스트나 이미지의 너비를 변경할 수 없습니다.

, , , , , 및 은 인라인 요소의 예입니다.

인라인 블록 요소(inline-block)는 인라인 요소와 블록 요소의 특성을 모두 가지고 있습니다. 인라인 블록 요소 기능:

1. 다른 요소와 같은 줄에 있습니다.

2 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다.

모든 브라우저가 이 속성을 지원하는 것은 아닙니다. 현재 지원되는 브라우저는 Opera 및 Safari입니다. IE에서는 인라인 요소에 대해 display:inline-block을 사용하지만, display:inline-block을 사용합니다. 인라인 요소가 display:inline-block 속성을 갖도록 IE에서 레이아웃을 트리거합니다. 위의 분석을 통해 블록 요소에 display:inline-block 속성을 설정하면 IE에서 inline-block의 효과를 얻을 수 없는 이유를 이해하는 것은 어렵지 않습니다. 이때 블록 요소의 레이아웃은 display:inline-block에 의해서만 트리거되며 원래는 행 레이아웃이므로 트리거 후에도 블록 요소는 여전히 행 레이아웃에 있으며 인라인으로 렌더링되지 않습니다. Opera의 블록 요소와 같은 객체입니다.

display:inline-block 효과를 얻는 방법은 무엇입니까? 두 가지 방법이 있습니다. 1 먼저 display:inline-block 속성을 사용하여 블록 요소를 트리거한 다음, display:inline을 정의하여 블록 요소를 인라인 객체로 렌더링합니다(두 개의 디스플레이는 두 개의 디스플레이에 배치되어야 합니다). CSS 문을 하나씩 차례로 실행) 이는 IE의 전형적인 버그입니다. 먼저 display:inline-block을 정의한 다음 디스플레이를 다시 인라인 또는 블록으로 설정하면 레이아웃이 사라지지 않습니다. 코드는 다음과 같습니다(...다른 속성 내용은 생략됨):

div {display:inline-block;...} 
div {display:inline;}

div {display:inline; zoom:1;}

블록과 인라인의 두 가지 개념은 약어로, 완전하고 정확한 것은 블록 수준 요소(블록 수준 요소)와 인라인 요소(인라인 요소)여야 합니다. . 블록 요소는 일반적으로 독립된 블록으로 구현되며 별도의 줄로 변경됩니다. 인라인 요소는 전후에 줄바꿈을 일으키지 않으며 줄이 가득 찰 때까지 일련의 인라인 요소가 한 줄에 표시됩니다. 일반적으로 html 요소에는 자체 레이아웃 수준(블록 요소 또는 인라인 요소)이 있습니다.

일반적인 블록 수준 요소에는 p, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 등이 포함됩니다. .

일반적으로 우리는 요소의 레이아웃 수준을 조정하기 위해 display:block, display:inline 또는 display:inline-block을 사용할 것입니다. 실제로 디스플레이 매개변수는 이 세 가지보다 훨씬 더 많이 사용됩니다.

더 많은 프로그래밍 관련 지식을 보려면

를 방문하세요! !

위 내용은 CSS에서 인라인 블록은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!