Block & Inline

block

• 다른 요소가 옆에 오지 못 함

 

inline

• 다른 요소가 옆에 올 수 있음
• 같은 줄에 위치할 수 있음(in the same line)

 

block이 inline과 다른 특징

• 너비와 높이를 가질 수 있음
• margin - 박스의 border(경계) 바깥에 있는 공간
• padding
• border

 

block -> inline, inline -> block으로 변경은 어떻게?

• inline -> block
  • display 속성 변경(기본값은 inline)

span {
        display: block;
      }

 

 

• block -> inline

div {
        display: inline;
      }