코코아톡 CSS 정리(1)

황유빈·2023년 6월 26일

block 은 옆에 아무것도 올 수 없다.
Inline 같은 줄에 위치 할 수 있다 (In the same line) ex) span,a,link

block 이 아닌 것들을 외워주는 것이 좋음

inline 은 높이와 넓이를 가질 수 없음

margin 은 box의 border(경계)의 '바깥'에 있는 공간
방향 설정 없이 margin 하나를 주면 사방에 전부 다 적용된다.
두 개를 줄 경우 상하, 좌우 이다.
네 개를 줄 경우 시계방향 순으로 적용된다. (상 우 하 좌)

padding은 box의 border(경계)로부터 '안쪽'에 있는 공간

  • span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
  • 하지만 padding은 사방에 가질 수 있다.
  • 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

0개의 댓글