yngmanie 블로그

block과 line 비교

frontend • html • css • inline • block

28 May 2018

block

• margin collapse 현상
  • box 안의 block1에게 margin-top을 주게되면 부모로부터 margin-top이 적용되는 것이 아니라, 부모도 같이 margin-top 적용되는 것을 확인할 수 있다. 이는 margin collapse 현상이고, 이를 해결하기위해서 border 값을 적용하면 된다.

inline

• margin-top은 content flow에 영향을 줄 수 있기때문에 적용이 안된다.(margin-bottom도 동일)

block VS inline

• block의 경우 padding은 context 안쪽으로 여백이 생기고, inline의 경우 context 밖으로 여백이 생긴다.