margin과 padding을 설정해보자.
margin은 컨텐츠 간의 간격을 이야기하고
padding은 컨첸츠 안에 있는 내용과 컨텐츠 테두리의 간격을 이야기한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
p, div {
display: block;
margin: 50px 10px;
padding: 10px;
width: 300px;
text-align: center;
background-color: #dddddd;
}
.text1 {
border: 1px solid red;
color: green;
float: left;
}
.text2 {
border: 2px dotted green;
float: left;
}
</style>
</head>
<body>
<div class="text1">여백과 위치 1</div>
<p class="text2">여백과 위치 2</p>
</body>
</html>
728x90
반응형
'HTML > CSS 기초' 카테고리의 다른 글
| [CSS] 실습 (0) | 2020.07.29 |
|---|---|
| [CSS] border와 outline (0) | 2020.07.29 |
| [CSS] 문단마다 스타일 설정하기 (0) | 2020.07.28 |
| [CSS] 글자 스타일 (0) | 2020.07.28 |
| [CSS] prefix (0) | 2020.07.28 |
