이 기사에서는 인라인 블록 요소 속성에 대해 설명합니다. 이는 CSS의 매우 유용한 속성입니다. 다양한 태그에 적용할 수 있습니다. CSS 표시 속성의 일부입니다.
리디마 티와리
용법:
display: inline-block
위 속성을 적용하면 해당 요소는 해당 하위 요소에 대해 인라인 및 블록으로 동작합니다. 인라인 요소와 블록 요소를 이해해 봅시다.
인라인 요소
새 줄에서 시작하지 않는 요소를 인라인 요소라고 합니다. 이는 별도의 작업이 아닌 본문의 일부로 결합됩니다. 이러한 요소는 필요한 공간만 차지합니다. 인라인 요소에는 왼쪽 및 오른쪽 공백을 추가할 수 있지만 인라인 요소의 위쪽 또는 아래쪽 패딩이나 여백에는 높이를 추가할 수 없습니다.
인라인 요소의 예:
예:
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'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>