31일차//[html] margin 속성 자세히 알아 보기 + 기본 마진을 삭제하는 방법

margin-top, margin-left, margin-bottom, margin-left 설정 방법)

 

margin: 0;

padding: 0; 

기본 마진을 삭제하는 방법

 

어제는 border 속성에 대해 자세히 알아보았는데요... border와 함께 자주 사용되는 속성이

  border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

padding과 margin 입니다.

 

padding: 본문 내용과 border 사이의 여백 border : 선 (선 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음) margin : border와 바깥과의 여백.

P-B-M 이라고 외워두시면 좋습니다. 

 

어제 배운 border(선)와 바깥과의 여백을 margin이라고 하는데

 

margin 속성 사용법.

 

 

 

[margin 마진 위, 오른쪽, 아래, 왼쪽 따로 따로 지정하기]

 CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

*아래 지정값은 px, cm, %로도 지정할 수 있습니다*

*음수값도 지정 가능(예: -10px)

 

margin-top (상단 여백)

margin-right (오른쪽 여백)

margin-bottom (아래 여백)

margin-left (왼쪽 여백)

 

사용 예

table {

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

margin-left: 5px;

}

 

 

[4면 한꺼번에 margin 지정하기]

 

table {

margin: 5px 7px 3px 0px;    (위, 오른쪽, 아래, 왼쪽 순임)

}

 

[4면이 모두 같을 때 margin 지정하기]

 

table {

margin: 5px;

}

 

[위, 오른쪽 & 왼쪽, 아래 margin 지정하기]

 

table {

margin: 5px 10px 0px:

}

 

[위 & 아래, 오른쪽 & 왼쪽 margin 지정하기]

 

table {

margin: 5px 10px;

}