width와 height , 마진과 패딩

width와 height

CSS에서 width와 height 속성은 element의 크기를 제어하는 데 사용된다.
width는 element의 너비를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다.

p {
    width: 500px;
}

<p> element의 폭이 상위 컨테이너의 80%로 설정된다.

p {
    width: 80%;
}

 

높이는 element의 높이를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다.

p {
    height: 200px;
}

<p> element의 높이가 상위 컨테이너의 50%로 설정된다.

p {
    height: 50%;
}

너비 및 높이 특성에는 패딩, 테두리 또는 여백이 포함되지 않는다. element의 전체 크기에 이러한 값을 포함하려면 상자 크기 조정 속성을 사용할 수 있다.

p {
    box-sizing: border-box;
}

img {
    height: auto;
    width: 100%;
}

 

마진과 패딩

CSS에서 여백과 패딩은 웹 페이지의 요소 사이의 공간을 제어하는 데 사용된다.

여백은 요소 외부의 공간을 제어하는 데 사용되는 반면, 패딩은 요소 내부의 공간을 제어하는 데 사용된다.

여백 속성은 요소 주위에 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 변 주위에 10px 여백을 추가하려면 다음 CSS를 사용할 수 있다.

div {
    margin: 10px;
}

또한   margin-top   margin-right  margin-bottom   margin-left 특성을 사용하여 요소의 각 측면에 대한 여백을 개별적으로 지정할 수 있다. 예를 들어, <div> 요소의 위쪽과 아래쪽에는 10px 여백을 추가하고 왼쪽과 오른쪽에는 20px 여백을 추가하려면 다음 CSS를 사용할 수 있다:

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

 

마찬가지로, 패딩 속성은 요소 내부의 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 면 주위에 10px 패딩을 추가하려면 다음 CSS를 사용할 수 있다:

div {
    padding: 10px;
}

또한 padding-top, padding-right, padding-bottom, and padding-left properties을 사용하여 요소의 각 측면에 대한 패딩을 개별적으로 지정할 수 있다. 예를 들어, <div> 요소의 위쪽과 아래쪽에는 10px 패딩을 추가하고 왼쪽과 오른쪽에는 20px 패딩을 추가하려면 다음 CSS를 사용할 수 있다:

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

상자 크기 속성을 사용하여 요소의 크기와 요소 주변의 공간을 제어할 수 있다.

div {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid black;
    width: 200px;
}