CSS - margin, padding, border
1 분 소요
CSS - margin, padding, border
- html의 각 요소는 모두 content, padding, border, margin이라는 값을 가집니다.
content: 일반적으로 각 요소에 정의하는 width, height는 content의 너비, 높이를 의미합니다. 이 값은 padding, border, margin에 따라 줄어들거나 커지지 않습니다. 고정되어 있죠.padding: content와 border 사이의 간격을 의미합니다.border: 테두리의 굵기를 의미합니다.margin: border 밖의 간격을 의미합니다. 이 값이 커지면 다른 요소들과의 border 밖의 간격이 커지게 되죠.
p {
/*
- 각 요소는 content > padding > border > margin으로 구성됩니다.
- 일반적으로 width, height는 content의 너비, 높이를 말합니다.
*/
width: 300px;
height: 30px;
border: 4px black solid;
/*
padding: top right bottom left
- content와 border 사이의 간격을 의미합니다.
- %로 정의하거나 음의 값을 넣는 것도 가능합니다.
*/
padding: 50px 1px 3px 100px;
/*
margin: top right bottom left
- border 외부의 간격을 의미합니다.
- 아래와 같이 모두 0으로 설정해버리면, 다른 요소들과 딱 붙게 되죠.
- %로 정의하거나 음의 값을 넣는 것도 가능합니다.
- auto 로 설정하는 경우 자동으로 여백을 동일하게 적용하여 중간 정렬하게 되죠.
*/
margin: 0px 0px 0px 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {
background-color: blue;
color: white;
font-weight: bold;
/*
- 각 요소는 content > padding > border > margin으로 구성됩니다.
- 일반적으로 width, height는 content의 너비, 높이를 말합니다.
*/
width: 300px;
height: 30px;
border: 4px black solid;
/*
padding: top right bottom left
- content와 border 사이의 간격을 의미합니다.
- %로 정의하거나 음의 값을 넣는 것도 가능합니다.
*/
padding: 50px 1px 3px 100px;
/*
margin: top right bottom left
- border 외부의 간격을 의미합니다.
- 아래와 같이 모두 0으로 설정해버리면, 다른 요소들과 딱 붙게 되죠.
- %로 정의하거나 음의 값을 넣는 것도 가능합니다.
- auto 로 설정하는 경우 자동으로 여백을 동일하게 적용하여 중간 정렬하게 되죠.
*/
margin: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<p>Test Paragraph1</p>
<p>Test Paragraph2</p>
<p>Test Paragraph3</p>
</body>
</html>
댓글남기기