margin
요소의 바깥쪽 여백을 지정
px, em, % 등 단위로 지정
기본값 0
값을 %로 지정하면 부모요소의 width의 비율로 여백을 가짐
좌우 마진을 auto로 지정하면 박스가 중앙 정렬됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 300px;
border: 4px solid red;
margin-top: 100px;
margin-left: 120px;
}
.box {
width: 25%;
height: 100px;
border: 4px solid gray;
background: #333;
}
.box:first-child {
margin-left: 30px;
margin-bottom: 15px;
margin-top: -50px;
}
.box:last-child {
background: tomato;
margin-left: auto;
margin-right: auto;
/* = margin: 0 auto; */
/* 내부에 있는 박스를 중앙으로 위치 시키고 싶을 경우
핵심은 좌측,우측 마진을 맞추는 것.!*
원초적인 방법은 부모 박스 넓이가 400 이고 토마토 박스가 100 일때
400-100 =300이 여유 공간이고 좌측 150, 우측 150의 마진을 주면됨./
/* 부모 자식 박스비율 4:1, 자식은 25%의 넓이를 가지며 75%의 여유를 반으로 나눠
좌우측 마진으로 설정 시키면 된다. */
/* 좌우마진을 auto로 설정하면 박스가 x축 중앙정렬됨.
박스 사이즈가 변경되어도 자동 중앙정렬됨. */
}
.it{
width: 300px;height: 300px;border: 4px solid #000;float: left;
}
.item1 {
background: pink;
margin:30px; /* 상하좌우 30px씩 각각적용 */
margin: 30px 50px; /*[상하] [좌우] */
margin: 40px 50px 60px; /*[상] [좌우] [하]*/
margin: 10px 20px 30px 40px; /*top부터 시계방향*/
}
.item2{
background: orange;
}
h1{
background: red;
/* - 박스 x축 중앙정령// 텍스트 중앙정령x
- 가로가 100%일 경우 남은 여백이 없어서 마진 분배가
불가능 하므로 정렬이 안됨 */
/* 텍스트 중앙정렬 text-align: center; */
text-align: center;
}
/* .item1과 item2의 중복된 코드가 많을 경우 공통클래스를 부여함.
부여후 공통클래스에 공통속성 부여 */
</style>
</head>
<body>
<h1>안녕하십니까</h1>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="it item1"></div>
<div class="it item2"></div>
<div class="it item3"></div>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_Box관련속성(border-box-sizing)_22.04.08(Fri) (0) | 2022.04.08 |
|---|---|
| CSS_Box관련속성(padding-boxsizing)_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_Box관련속성(max,min)_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_Box관련속성(width, height)_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_Box단위(vw,vh_22.04.08(Fri) (0) | 2022.04.08 |