display

요소의 박스 타입(유형)을 설정

 

속성 값

값	의미
block	블록 요소
inline	인라인 요소
inline-block	인라인-블록 요소(<input>등) 인라인 요소이지만, 추가적으로 블록의 특성을 추가적으로 가지고 있다. 즉, width&height&margin&padding의 값을 가질 수 있다.
기타	table, table-cell, flex 등
none	요소의 박스 타입이 없음(요소가 사라짐)

 

 

 

1. 인라인 요소를 블록 요소로 바꿈

span{
  display: block;
  width: 100px;
  height: 100px;
  background: tomato;
}

 

 

2. 블록 요소를 인라인 요소로 바꿈

div{
  display: inline;
  width: 100px;
  height: 100px;
  background: tomato;
}

 

 

3. input태그는 인라인이지만 블럭요소의 특징을 가지고 있다.

input {
  width: 100px;
  height: 50px;
  margin: 50px 0;
  padding: 20px 0;
}

블록요소와 마찬가지로 width,height,margin,padding을 조절할 수 있다.

4. 주의** display: none; 은 안보이는것이 아니라 진짜 요소가 없어지게 만드는 것이다.