[HTML/CSS] display속성과 margin속성 & margin 상쇄 형상

display속성 : 

• 화면에 보여지는 형태를 지정
• 요소의 inline, block, inline-block특성을 바꿔준다.
• inline : 내용만큼의 영역을 가지는 속성, 여백 및 크기조절이 불가능한 속성
• block : 웹 페이지의 전체 너비를 영역으로 가지는 속성
• inline-block: inline처럼 내용만큼의 영역을 가지면서, block처럼 여백 및 크기조절이 가능한 속성
• none : 요소를 화면에서 제거하는 속성

 

display 예시

 

See the Pen MWpOzRY by 정혜선 (@Diligent-milk) on CodePen.

margin과 padding

내용겉에 있는 여백이다. 아래 그림에서 272 x 92가 내용 영역이다.

그림에서 보여지듯이 padding이 더 안쪽 여백이고 margin이 밖같쪽 여백이다.

 

 

margin: auto

• 요소를 가운데로 배치
• dixplay 속성이 block, inline-block인 요소의 경우만 적용가능하다.

 

See the Pen margin auto by 정혜선 (@Diligent-milk) on CodePen.

 

 

margin 상쇄 형상

아래 예시에서는 위의 박스는 아래로 여백을 50px만큼 주고

아래 박스는 여백을 위로 25px만큼 줘서 마진이 겹쳤다.

마진이 겹치면 50+25 해서 75만큼 커지는게 아니라 최대 마진인 50만큼만 마진이 넣어진다.

따라서 마진을 넣어야 하는데 마진이 겹쳐진다면 둘중 더 큰 마진 하나만 넣으면 된다.

See the Pen 마진상쇄 by 정혜선 (@Diligent-milk) on CodePen.