본문 바로가기
> HTML-CSS

[CSS] margin 기본 사용법, margin 중복(중첩)

by bky373 2020. 10. 29.

margin 기본 사용법

1번- margin: 10px;
2번- margin: 10px 20px;
3번- margin: 10px 20px 30px;
4번- margin: 10px 20px 30px 40px;

1번 적용- margin: [위, 아래, 좌, 우];
2번 적용- margin: [위, 아래], [좌, 우];
3번 적용- margin: 위, [좌, 우], 아래;
4번 적용- margin: 위 우 아래 좌;

1번- margin: 10px;
2번- margin: 10px 20px;
3번- margin: 10px 20px 30px;
4번- margin: 10px 20px 30px 40px;

1번 적용- margin: [위, 아래, 좌, 우];
2번 적용- margin: [위, 아래], [좌, 우];
3번 적용- margin: 위, [좌, 우], 아래;
4번 적용- margin: 위 우 아래 좌;



margin 중복(중첩)

1번: 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
2번: 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때
3번: 형제 요소들의 margin-top과 margin-bottom이 만났을 때

*주의: 형제 요소들의 margin-left와 margin-right가 만났을 때는 중첩이 허용되지 않는다!


댓글