display 속성이 inline인 element의 경우 줄바꿈 없이 한줄로 나타나고, 크기를 지정할 수 없다.( width, height 속성 적용 x ) 또한 좌우 margin, padding은 설정 가능하나 상하 설정은 불가능 하다.
▶️ 내용이 담겨있는 크기로 맞춰진다.
html
<span class="first">1</span>
<span class="second">2</span>
<span class="third">3</span>
inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <textarea>, <label>, <sup>, <q>, <button>...
display 속성이 block인 element의 경우 해당 요소 혼자 한줄을 다 차지하고, 크기 설정, 여백 설정이 가능하다. ( width, height, margin, padding 속성 적용 o )
크기 설정 전 모습
크기, 여백 설정 후 모습
html
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
css
.first {
background-color: yellow;
width: 30px;
height: 30px;
margin: 10px;
}
.second {
background-color: green;
width: 30px;
height: 30px;
margin: 10px;
}
.third {
background-color: blue;
width: 30px;
height: 30px;
margin: 10px;
}
block 요소
<hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>...
말그대로 inline의 특징과, block의 특징을 둘 다 가지고 있다. inline 처럼 요소들이 줄바꿈 없이 한 줄로 나타나지만, block 요소처럼 크기, 여백 설정이 가능하다. ( width, height, margin, padding 속성 적용 o )
html
<button class="first">1</button>
<button class="second">2</button>
<button class="third">3</button>`
css
.first {
background-color: yellow;
width: 30px;
height: 30px;
margin: 10px;
}
.second {
background-color: green;
width: 30px;
height: 30px;
margin: 10px;
}
.third {
background-color: blue;
width: 30px;
height: 30px;
margin: 10px;
}
inline-block 요소
<button>, <select>...