TIL 12 HTML/CSS - inline, block, inline-block
inline
display
속성이 inline
으로 지정된 엘리먼트는 전 후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적으로 <span>
, <a>
, <em>
태그 등이 있다.
여러 개의 inline
엘리먼트들을 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 된다.
inline
엘리먼트를 사용할 때 주의할 점은 width
와 height
속성을 지정해도 무시된다는 것이다.
그리고 margin
과 padding
속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.
//test.html
<a>I'm A</a>
<span>I'm SPAN</span>
<em>I'm EM</em>
//test.css
span {
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
a {
background: red;
}
em {
background: blue;
}
block
display
속성이 block
로 지정 된 엘리먼트들은 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적으로 <div>
, <p>
, <h1>
태그 등이 있다.
block
엘리먼트는 inline
과 달리 width
, height
, margin
, padding
속성이 모두 반영된다.
//test.html
<h1>I'm H1</h1>
<div>I'm DIV</div>
<p>I'm P</p>
//test.css
div {
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
h1 {
background: red;
}
p {
background: blue;
}
inline-block
display
속성이 inline-block
로 지정된 엘리먼트는 inline
엘리먼트처럼 전후 줄바꿈이 없이 한 줄에 나란히 배치된다. 하지만 inline
엘리먼트에서 불가능하던 width
와 height
속성 지정 및 margin
과 padding
속성의 상하 간격 지정이 가능해진다.
대표적으로 <button>
, <select>
태그 등이 있다.
inline-block
엘리먼트는 사용하기 위해서는 해당 엘리먼트의 스타일을 display: inline-block
로 지정해줘야 한다.
//test.html
<a>I'm a</a>
<em>I'm em</em>
<span>I'm span </span>
//test.css
em {
display: inline-block;
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
}
a {
display: inline-block;
background: red;
height: 75px;
}
span {
display: inline-block;
background: blue;
width: 100px;
height: 100px;
}
Author And Source
이 문제에 관하여(TIL 12 HTML/CSS - inline, block, inline-block), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wndud0647/TIL-12-HTMLCSS-3-inline-block-inline-block저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)