반응형
CSS margin (속성)
CSS에서 margin은 태그주변의 공간을 조절하기 위한 속성이다.
Margin
Margin은 border(경계선) 바깥쪽에 투명한 여백의 크기를 조절하는데 사용한다.margin을 일정크기로 설정하면 그영역은 투명한 공간이 차지하게 된다.
margin은 상하좌우 모두 따로 설정할 수 있다.
예를들면, 아래와 같다.
예제 1
p {
margin-top: 100px;
margin-bottom: 70px;
margin-right: 150px;
margin-left: 50px;
}
margin-top: 100px;
margin-bottom: 70px;
margin-right: 150px;
margin-left: 50px;
}
예제 2
p {margin:100px 150px 70px 50px;}
위의 2개의 예제는 결과 똑 같습니다.
위쪽으로 100px 띄고 오른쪽으로 150px 띄고 아래쪽으로 70px 띄고 왼쪽으로 50px 만큼 띄고 난 후에 p태그를 넣어라는 명령입니다.
예제 3
위의 예제는 상하좌우 모두 100px씩 빈공간을 확보하라는 뜻이다.
p {margin:100px;}
예제 4
위의 예제는 상하는 100px, 좌우는 50px의 빈공간을 확보하라는 뜻이다
p {margin:100px 50px;}
예제 5
위의 예제는 위쪽은 100px, 좌우는 50px, 아래쪽은 75px의 빈공간을 확보하라는 뜻이다.
p {margin:100px 50px 75px;}
종합예제
<!DOCTYPE html>
<html>
<head>
<style>
p {background-color: yellow;}
p.test {
margin-top: 20px;
margin-bottom: 0px;
margin-right: 30px;
margin-left: 70px;
}
p.testex{margin:50px 25px;}
</style>
</head>
<body>
<p>margin을 주지않은 p태그.</p><br/>
<p class="test">margin을 준 p태그.</p><br/>
<p class="testex">상하:50px 좌우:25px margin 준 p태그</p>
</body>
</html>
<html>
<head>
<style>
p {background-color: yellow;}
p.test {
margin-top: 20px;
margin-bottom: 0px;
margin-right: 30px;
margin-left: 70px;
}
p.testex{margin:50px 25px;}
</style>
</head>
<body>
<p>margin을 주지않은 p태그.</p><br/>
<p class="test">margin을 준 p태그.</p><br/>
<p class="testex">상하:50px 좌우:25px margin 준 p태그</p>
</body>
</html>
결과
margin을 주지않은 p태그.
margin을 준 p태그.
상하:50px 좌우:25px margin 준 p태그
※ 결과 테두리의 자체의 padding값이 있어서 첫번째 margin은 왼쪽에서 떨어져있는 상태이다
원래는 왼쪽에 딱 붙어있는 것이 맞다
margin의 개념 다시 확인하기
즐거운 하루 되세요. ^^ 버튼을 누르면 이것은 마진값이 적용되면서 선 바깥쪽으로 여백이 생기죠.
마진값이 바뀌니까 선 바깥쪽 여백이 늘어나죠 !!. 뭐가 다른지 금방 아시겠죠.
padding 강좌로 가서 padding과 비교해 보세요.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
padding 강좌로 가서 padding과 비교해 보세요.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
반응형
