이 기사에서는 인라인 블록 요소 속성에 대해 설명합니다. 이는 CSS의 매우 유용한 속성입니다. 다양한 태그에 적용할 수 있습니다. CSS 표시 속성의 일부입니다.

리디마 티와리

용법:

 display: inline-block 

위 속성을 적용하면 해당 요소는 해당 하위 요소에 대해 인라인 및 블록으로 동작합니다. 인라인 요소와 블록 요소를 이해해 봅시다.

인라인 요소

새 줄에서 시작하지 않는 요소를 인라인 요소라고 합니다. 이는 별도의 작업이 아닌 본문의 일부로 결합됩니다. 이러한 요소는 필요한 공간만 차지합니다. 인라인 요소에는 왼쪽 및 오른쪽 공백을 추가할 수 있지만 인라인 요소의 위쪽 또는 아래쪽 패딩이나 여백에는 높이를 추가할 수 없습니다.

인라인 요소의 예:

, , , <strong> , <a href="/html-image"><img></a> , , <a href="/html-button-tag"></a> , , , , are some of the inline tags.</strong>

예:

 Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag 

산출:

구조 속의 c 구조

블록 요소

새 줄에서 시작하는 요소를 블록 요소라고 합니다. 블록 요소는 해당 콘텐츠에 사용 가능한 전체 너비를 확보합니다. 인라인과 달리 이러한 요소에는 위쪽 및 아래쪽 여백이 있습니다. 블록 수준 요소는 body 태그 내부에만 나타날 수 있습니다. 블록 수준 요소는 인라인 요소보다 더 큰 구조를 만듭니다.

블록 요소의 예:

,

,

, , , , , 은 인라인 태그 중 일부입니다.

구글은 무엇을 뜻하는가

예:

 Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph&apos;s parent element.</p> 

산출:

인라인 블록 요소

inline-block의 표시 값은 한 가지 예외를 제외하고 inline과 유사하게 작동합니다. 즉, 해당 요소의 높이와 너비가 수정 가능해집니다.

예:

C++ 쌍

 span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> 

산출:

다음은 한 페이지의 모든 요소를 ​​사용하는 출력 파일입니다.

암호

 span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>