css : inline, inline-block, block

1. inline

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>...

2. block

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>...

3. inline-block

말그대로 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>...