[css] display

block

• 한줄에 하나

inline

• 내부 내용의 크기 만큼 부피 차지 (width, height 조절할 수 없음)
• 마진은 좌우만 설정 가능하다. inline은 line-height로 문자 상하위를 결정하기 때문이다.
• padding은 잘 적용되지만 top은 예외가 발생한다. line-height까지 적용을 못시켜 안의 내용물이 padding값을 적절하게 설정을 안한것 처럼 보인다
• border도 padding과 마찬가지
• img는 inline이지만 inline-block으로 취급

 

padding 예

<div>
  <span class="wrapper">
    apple banana cherry
  </span>
</div>

.wrapper {
  border: 1px solid black;
  text-align: center;
  padding: 60px;
  margin: 20px;
  background-color: dodgerblue;
}

 

line-height를 padding 상하 크기 만큼 추가해서 해결 가능하다

.wrapper {
  border: 1px solid black;
  text-align: center;
  padding: 60px;
  margin: 20px;
  background-color: dodgerblue;
  line-height: 120px;
}

 

 

 

inline-block

• inline을 block처럼 사용하고 싶을 때

none

• 미노출 시키고 싶을 때

 

https://www.youtube.com/watch?v=CwEzDMTpQHY