반응형
1. padding은 요소의 내부 여백을 의미한다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>css
.item {
width: 100px;
height: 100px;
background-color: aqua;
border: 4px solid red;
}
.container .item:first-child {
padding: 20px;
}
2. 결과
3. border를 dashed로 하면 점선이 나온다.
.item {
width: 100px;
height: 100px;
background-color: aqua;
}
.container .item:first-child {
border: 4px dashed;
}
반응형
'CSS' 카테고리의 다른 글
| CSS, vh은 무엇일까? (2) | 2023.04.11 |
|---|---|
| CSS 연습 (0) | 2023.03.31 |
| CSS 박스 모델 연습 (0) | 2023.03.28 |
| CSS 기본 문법 ② (0) | 2023.03.27 |
| CSS 복습 (0) | 2023.03.24 |
