Margin 및 Padding 의 간략한 표기

Margin 및 Padding 의 간략한 표기

네 방향 모두에 대해 스타일의 margin 이나 padding을 지정해 주어야 할 경우가 자주 있다. 그러나 각각의 스타일마다 네개의 프로퍼티(margin-right, margin-left, margin-top, margin-bottom)를 일일히 입력하는 것은 지겨운 일이다. 하지만 속기형 프로퍼티인 margin 과 padding 을 사용하여 네가지 각 프로퍼티들은 빠르게 지정해줄수 있다

• margin:0 10px 10px 20px;
• padding:10px 5px 5px 10px;

Tip : 만약 CSS 에서 사용되는 값이 0이라면, 측정 단위를 붙이지 않아도 된다. 예를 들어 margin:0px;대신 margin:0 이라고만 입력해도된다

값을 지정하는데 있어서 순서가 가장 중요하다. 반드시 top, right, bottom, left( 위, 오른쪽, 아래, 왼쪽) 의 순서대로 작성해야한다. 만약 네방향에 같은 값을 사용하고 싶으면 그냥 하나의 값만 입력하면 되니 훨씬 간편하다. 만일 모든 <h1>태그에서 margin 을 없애고 싶다면, 아래처럼 스타일을 작성하면 된다. h1{margin:0;} 마찬가지로, 어떤 내용과 그 테두리 사이의 공간을 네 방향에 똑같이 넣으려면 다음과 같이 속기법을 사용한다 padding:10px; 그리고 다음과 같이 padding:10px 20px; 같이 적을 수 있다. 이런 방법은 상하 값이 같고, 좌우 값이 같을 경우 상/하 값을 먼저 적고 좌우 여백을 적는다. 또한 padding:10px 20px 15px; 이렇게 세가지로 적으면 위쪽여백, 좌우여백, 아래 여백 이런식의 순서가 된다. 물론 중간의좌우 여백 값은 좌우가 동일한 값이다

Tip : Top 과 bottom 에 같은 값을 사용하고 left와 right 에는 다른 값을 사용할 경우, 두개의 값을 사용한다. margin:0.2em; 이라고 입력하면, top 과 bottom 의 마진은 0 으로 지정하고 left 와 right 의 margin 은 2em 으로 지정한다는 의미다