디스플레이는 무엇입니까 : 인라인 블록은?

디스플레이는 무엇입니까 : 인라인 블록은?

display:inline-block 인라인 및 블록 레벨 요소의 특성을 결합한 CSS 속성 값입니다. 요소가 display:inline-block 요소가 인라인 요소와 같은 선 내에서 흐를 수 있지만 요소가 블록 레벨 요소와 같은 너비 및 높이 특성을 허용 할 수 있습니다. 이는 요소가 블록 요소와 마찬가지로 자체 전후에 새로운 선을 강제하지 않지만 CSS에 지정된 치수를 존중할 것임을 의미합니다.

예를 들어, 일련의 <div> 요소가 표시되면 <code>display:inline-block 되면 공간이있는 한 동일한 라인에 앉아 폭과 높이를 명시 적으로 설정할 수 있습니다. 이는 요소가 수평으로 정렬되지만 여전히 크기와 스타일에 대한 개별 제어를 유지하려는 네비게이션 메뉴, 버튼 그룹 또는 레이아웃을 만드는 데 특히 유용합니다.

디스플레이의 주요 차이점은 다음과 같습니다. 인라인 블록과 디스플레이 : 인라인?

display:inline-block 과 display:inline 치수를 처리하고 간격을 처리하는 방법을 중심으로합니다.

1. 치수 : display:inline 요소는 너비 또는 높이를 지정할 수 없습니다. 그들은 콘텐츠의 공간 만 가져갑니다. 대조적으로, display:inline-block 요소는 너비와 높이 값을 가질 수 있으므로 크기를 더 많이 제어 할 수 있습니다.
2. 수직 정렬 : display:inline 요소는 기본적으로 주변 텍스트의 기준선에 정렬되는 반면, display:inline-block 요소는 table-cell 요소와 유사한 vertical-align 특성을 사용하여 정렬 될 수 있습니다.
3. 마진 및 패딩 : display:inline 요소는 수평 마진과 패딩을 존중하지만 수직 마진과 패딩을 무시합니다. display:inline-block 요소는 수평 및 수직 마진과 패딩을 모두 존중합니다.
4. 라인 브레이크 : 두 가지 유형의 요소 모두 자체 이후 라인 브레이크를 만들지 않으며, 이는 display:block 요소.

디스플레이 : 인라인 블록은 웹 페이지의 요소 레이아웃에 영향을 미칩니 까?

display:inline-block 특정 치수와 간격을 가질 수 있지만 여전히 요소를 인라인으로 배치 할 수 있도록하여 웹 페이지의 요소 레이아웃에 영향을 미칩니다. 레이아웃에 영향을 미치는 몇 가지 방법은 다음과 같습니다.

1. 수평 정렬 : display:inline-block 수평으로 정렬되어 내비게이션 메뉴 또는 버튼 그룹과 같은 수평 레이아웃을 쉽게 생성 할 수 있습니다.
2. 간격 제어 : 여백과 패딩을 적용하면 display:inline-block 요소.
3. 크기 조정의 유연성 : display:inline-block 요소는 순수한 인라인 요소와 비교하여 정확한 레이아웃을보다 제어 할 수 있습니다.
4. 공백 문제의 가능성 : 하나의 일반적인 레이아웃 문제는 display:inline-block 요소는 HTML 마크 업의 공간으로 인해 발생할 수 있습니다. 이것은 신중한 HTML 구조화 또는 음의 마진과 같은 CSS 기술 또는 부모 요소에서 font-size:0 사용하여 관리 할 수 ​​있습니다.

표시 할 수 있습니다 : 인라인 블록을 사용하여 그리드와 같은 구조를 생성합니까?

예, display:inline-block 최신 CSS 그리드 또는 Flexbox 레이아웃을 사용하는 것만 큼 간단하거나 유연하지는 않지만 그리드와 같은 구조를 만드는 데 사용될 수 있습니다. 어떻게 할 수 있는지 다음과 같습니다.

1. 요소 설정 : 여러 요소를 display:inline-block 및 너비와 높이를 제어하여 행과 열로 배열하십시오.
2. 간격 : 여백과 패딩을 사용하여 이러한 요소 사이의 간격을 제어하여 그리드의 모양을 만듭니다.
3. 정렬 : 수직 및 수평 정렬은 vertical-align 과 같은 특성으로 및 각 셀의 균일 너비 및 높이를 설정하여 제어 할 수 있습니다.

예를 들어, 일련의 <div> 요소가 <code>display:inline-block , 각각 고정 된 치수가 있습니다.

 <code class="html"><div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> </div></code>

 <code class="css">.grid-container { font-size: 0; /* To avoid white space issues */ } .grid-item { display: inline-block; width: 100px; height: 100px; margin: 5px; font-size: 16px; /* Reset font size */ }</code>

이렇게하면 수평으로 배열 된 100x100 픽셀 박스의 그리드가 생성 된 다음 필요에 따라 다음 줄로 감습니다. 이 방법은 작동하지만 최신 CSS 레이아웃 기술에 비해 응답 성 및 동적 크기 조정 측면에서 제한이 있습니다.