border(테두리)
margin(바깥여백)
padding(안쪽여백)
다양한 경우의 수
여백은 상하좌우 네개의 면에 존재하는 영역
작성자는 각 면에 개별적으로 두께를 정의할 수 있따.
이를 위해 다음 두 가지 방법을 사용한다.
하위속성 정의하기
여러 값을 한 번에 정의하기.
padding-top
padding-left
padding-right
padding-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여백 지정해보기</title>
<style>
div{
width: 100px; height: 100px;
padding: 10px;
border: 10px solid red;
margin: 10px 20px 30px 40px
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
style아래
div{
.
.
.margin: 10px 위 20px 오른쪽 30px 왼쪽 40px 아래
'프론트엔드 > css' 카테고리의 다른 글
| [유노코드 css 10강] 백그라운드 하위 속성 그림,이미지 넣기,위치,정 (0) | 2023.08.03 |
|---|---|
| [유노코딩 css 9강] 박스모델 너비 높이, 콘텐츠 모델 (0) | 2023.08.03 |
| [유노코딩 css 7강] 박스 (0) | 2023.08.02 |
| [유노코딩 css 6강] div,span의 블록,인라인 여부, border의 하위속성 (0) | 2023.08.02 |
| [유노코딩 css 5강] 텍스트 관련 속성 (0) | 2023.08.02 |
