CSS - 박스 여백 지정

padding 과 margin 속성은 다음 표를 참고하면 됩니다.

속 성	설 명
padding	테두리 안쪽 여백 조절. <크기> | <백분율> | auto 중 하나. padding-top: 상단 여백 조절 padding -right: 오른쪽 여백 조절. padding -bottom: 하단 여백 조절. padding -left: 왼쪽 여백 조절. padding: 다음 중 하나를 설정   <상> <우> <하> <좌>패딩   <상> <좌우> <하>패딩   <상하> <좌우>패딩   <상하좌우>패딩 Ex.1) padding: 30px; /* 상하좌우 패딩 30px */ Ex.2) padding: 15px 30px; /* 상하 15px, 좌우 30px */ Ex.3) padding: 15px 30px 20px; /* 상 15px, 좌우 30px, 하 20px */ Ex.4) padding: 15px auto; /* 상하 15px, 좌우 패딩은 auto */
margin	테두리 바깥쪽 여백 조절. <크기> | <백분율> | auto 중 하나. margin-top: 상단 여백 조절 margin-right: 오른쪽 여백 조절. margin-bottom: 하단 여백 조절. margin-left: 왼쪽 여백 조절. margin: 다음 중 하나를 설정   <상> <우> <하> <좌>마진   <상> <좌우> <하>마진   <상하> <좌우>마진   <상하좌우>마진 Ex.1) margin: 30px; /* 상하좌우 마진 30px */ Ex.2) margin: 15px 30px; /* 상하 15px, 좌우 30px */ Ex.3) margin: 15px 30px 20px; /* 상 15px, 좌우 30px, 하 20px */ Ex.4) margin: 15px auto; /* 상하 15px, 좌우 마진은 auto */

<style>
.hh1 {
  width: 100px;
  border: 1px solid red;

  /* 상하 35px, 좌우 60px 마진 */
  margin: 35px 60px;
}
.hh2 {
  width: 100px;
  border: 1px solid red;

  /* 상하좌우 15px 마진 */
  margin: 15px;

  /* 상 10px 좌우 20px 하 5px 인 패딩*/
  padding: 10px 20px 5px;
}
.hh3 {
  width: 100px;
  border: 1px solid red;

  /* 상 10px 좌우 20px 하 15px 인 마진 */
  margin: 10px 20px 15px;

  /* 상하 10px 좌우 15px 인 패딩*/
  padding: 10px 15px;
}
</style>

<p>하보니 PHP</p>
<p class="hh1">하보니 PHP</p>
<p class="hh2">하보니 PHP</p>
<p class="hh3">하보니 PHP</p>

하보니 PHP

하보니 PHP

하보니 PHP

하보니 PHP