1. 일반 사용 요령
p {
margin-top: 100px; /*위*/
margin-bottom: 100px; /*아래*/
margin-right: 100px; /*오른쪽*/
margin-left: 100px; /*왼쪽*/
}2. 1줄로 표현 (위 -> 오른쪽 -> 아래 -> 왼쪽)
p {
margin: 50px 60px 70px 80px; /*위, 오른, 아래, 왼*/
}3. 같은 여백 주기 (전부)
p {
margin: 25px; /*위,아래,오른쪽,왼쪽 모두 25px*/
}4. 여백 상속(다른 테그의 속성을 받기)
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 150px;
}
p.child {
margin-left: inherit; /*물려받기*/
}
</style>
</head>
<body>
<div>
<p class="child">여백 효과 물려 받기</p>
</div>
</body>
</html>
반응형
'HTML CSS' 카테고리의 다른 글
| Html css Height, Width (0) | 2019.07.05 |
|---|---|
| Html CSS Padding (0) | 2019.07.04 |
| Html CSS Borders (0) | 2019.07.03 |
| Html CSS 중앙 정렬 (0) | 2019.07.02 |
| html css 백그라운드 Image (0) | 2019.07.01 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글