[HTML5&CSS3] 크기와 여백

1. width / height

 

가로와 세로 크기를 지정합니다.

<style type="text/css">
div
{
   width: 100px;
   height: 75px;
   background-color: red;
   border: 1px solid black;
}
</style>

width와 height는 내부에서 글자를 표시하는 영역의 크기를 조절합니다. 그런데 box-sizing 속성을 사용하면 width와 height의 크기 기준을 border까지 포함한 크기로 바꿀 수 있습니다.

<style type="text/css">
div
{
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
    box-sizing: border-box;
}
</style>

---

2. margin / padding

 

margin과 padding는 여백과 관련된 속성으로 border를 기준으로 안쪽을 padding, 바깥쪽을 margin으로 볼 수 있습니다.

<style type="text/css">
div
{
   width: 100px;
   height: 75px;
   
   margin: 100px;

   background-color: red;
   border: 1px solid black;
}
</style>

<style type="text/css">
div
{
   width: 100px;
   height: 75px;
   
   padding: 100px;

   background-color: red;
   border: 1px solid black;
}
</style>

참고로 margin은 margin-bottom으로 아래쪽, margin-left로 왼쪽, margin-right로 오른쪽, margin-top으로 위쪽 영역을 개별적으로 지정할 수 있습니다.

<style type="text/css">
div
{
   width: 100px;
   height: 75px;
   
    margin-top: 50px;
    margin-bottom: 50px;

   background-color: red;
   border: 1px solid black;
}
</style>