프론트엔드/css
[유노코딩 css 8강] padding과 margin
응개야
2023. 8. 2. 22:14
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 아래