Block과 Inline

Block 요소

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등

특징 - block 요소의 좌우 크기는 부모 태그의 크기와 같다
그렇기 때문에 block요소의 좌우에는 다른 요소를 붙여넣을수 없다

Inline 요소

<span>, <a>, <img> 태그 등

특징 - 요소의 크기가 컨텐츠의 크기와 같다

block 요소와 Inline 요소간의 상호전환

Block to Inline

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

Block 요소에 float 또는 display: inline-block을 부여하면 inline 요소로 바뀐다

Inline to Block

 .block-span {
  display: block;
}

Inline 요소에 display: block 을 부여하면 block요소로 바뀐다