[TIL] margin, padding

margin : 상하좌우 여백
padding: 상하좌우 안쪽 여백

 

margin

margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. margin 속성 또한 다양하게 표기 가능하다.

<h1>Heading 1</h1>

<style>
h1 {
 margin-top: 50px;
 margin-right: 50px;
 margin-bottom: 80px;
 margin-left: 50px;
}
</style>

 

4가지 방식이 존재한다.

1. 한꺼번에 지정하기

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 7px 3px; (위,오른쪽,아래,왼쪽)
}
</style>

 

2. 4면이 모두 같을 때 지정하기

<h1>Heading 1</h1>

<style>
h1 {
  margin: 50px;
}
</style>

 

3. 위, 오른쪽&왼쪽, 아래

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 0px; (위, 오른쪽&왼쪽, 아래)
}
</style>

 

4. 위&아래 , 오른쪽&왼쪽

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px; (위&아래, 오른쪽&왼쪽)
}
</style>

 

padding

padding 속성을 사용하면 안쪽 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. padding 속성 또한 다양하게 표기 가능하다.

<h1>Heading 1</h1>

<style>
h1 {
 padding-top: 50px;
 padding-right: 50px;
 padding-bottom: 80px;
 padding-left: 50px;
}
</style>

 

4가지 방식이 존재한다.

 

1. 한꺼번에 지정하기

시계방향으로 위 오른쪽 아래 왼쪽의 안쪽여백을 설정할 수 있다.

<h1>Heading 1</h1>

<style>
h1 {
  padding: 5px 10px 7px 3px; (위,오른쪽,아래,왼쪽)
}
</style>

 

2. 4면이 모두 같을 때 지정하기

<h1>Heading 1</h1>

<style>
h1 {
  padding: 50px;
}
</style>

 

3. 위, 오른쪽&왼쪽, 아래

<h1>Heading 1</h1>

<style>
h1 {
  padding: 5px 10px 0px;
}
</style>

 

4. 위&아래 , 오른쪽&왼쪽

<h1>Heading 1</h1>

<style>
h1 {
  padding: 5px 10px;
}
</style>