Web/CSS
[days01] 여백(margine)과 패딩(padding) + outline
다연
2020. 12. 3. 19:36
반응형
(1) 여백(margine)
1. 테두리(border) 외부의 요소 주위 공간을 만든 것 : 여백
2. margin-top/margin-right/margin-bottom/margin-left
3. 위를 줄여 margin으로 사용 가능
4. margin 값 - auto, px, pt.cm 등등, %, inherit(상속), 음수값을 사용할 수 있다.
h3과 div가 위 아래로 있는 경우, h3에서 bottom 마진을 50 주고 div가 top 마진을 100 준다면,
도합 마진이 150이 떨어질까 ? 아니. 그냥 100px만 떨어진다.
h3{
margin-bottom: 50px;
}
div{
margin-top: 100px;
}**요소의 상단(Top) 여백과 요소의 하단(Bottom) 여백이 충돌날때는 가장 큰 여백으로 처리된다. (덧셈이 아님)
마진도 상 하 좌 우 지정이 가능하다.
margin: 100px 50px 100px 50px; /*상 우 하 좌 */
margin: 50px; /* 상하좌우 모두 50 */
margin: 50px 100px; /* 상하50, 좌우100 */
margin: 50px 100px 200px; /* 상50 좌우100 하200 */
margin 속성값 : auto 브라우저 여백 계산 처리
가운데 정렬할 때 auto 속성값을 많이 사용한다.
#demo{
background-color: green;
width:300px;
height: 100px;
margin: 50px auto; /* 상하는 50주고 좌우는 가운데 놓고자 할때 */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
border: solid 1px blue;
}
div,p{
border:solid 1px gray;
}
div{
margin: 50px;
}
p{
border-color: red;
margin: inherit; /*부모(div)의 마진 속성 상속 */
/*== margin: 50px; */
}
</style>
</head>
<body>
<!-- margin:inherit(상속) -->
<div>
<p class="ex1">
Lorem ipsum dolor sit amet, concrh fdmrt rjkfdf
</p>
</div>
</body>
</html>
(2) 패딩(padding)
- 테두리(border) 안에 요소의 내용 주위 공간을 생성하는 데 사용된다.
- 길이: px, pt, cm 등등
% 포함하는 요소 너비의 백분율
inherit(상속) 사용가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
border: solid 1px gray;
background: lightblue;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 10%; /* body의 10% */
/* padding: 50px 20% 50px 10%; 상 우 하 좌*/
/* padding:20px; 모두 20*/
/* padding: 10px 20px; 상하10 좌우20 */
/* padding: 10px 20px 30px; 상10 좌우20 하30*/
}
</style>
</head>
<body>
<h3>css의 패딩(padding)</h3>
<!--
- 테두리(border) 안에 요소의 내용 주위 공간을 생성하는 데 사용된다.
- 길이: px, pt, cm 등등
% 포함하는 요소 너비의 백분율
inherit(상속) 사용가능
-->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Provident recusandae nam. Impedit nostrum ipsam
exercitationem assumenda vero sint beatae quasi sunt
sed molestiae enim porro accusantium quas odio eum obcaecati?</div>
</body>
</html>
<style>
div.ex1{
width:300px;
background-color: yellow;
}
div.ex2{
width: 300px;
padding: 25px; /* 패딩을 주니 width가 300+25(왼)+25(오) 된다. */
/* 레이아웃 짤 때 중요!!! */
background: lightblue;
border: 10px solid red; /*보더를 주니 width가 300+25+25+10+10이 됨*/
/*너비가 달라지는 거 꼭 기억하자 */
}
div.ex3{
width: 300px;
padding: 25px;
background: lightblue;
border: 10px solid red;
/* padding 크기에 상관 없이 너비를 300px로 유지하자 */
box-sizing: border-box;
}
</style>ex01은 그냥 width:300을 설정했고
ex02는 ex01에다 padding 25(좌우니까 X2) border 10(좌우니까 X2) 총 너비가 370이 된다.
ex03은 ex02와 동일하나 box-sizing: border-box; 을 추가하니 총 너비가 300에서 변하지 않았다.
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div.ex1{
width:300px;
background-color: yellow;
}
div.ex2{
width: 300px;
padding: 25px; /* 패딩을 주니 width가 300+25(왼)+25(오) 된다. */
/* 레이아웃 짤 때 중요!!! */
background: lightblue;
border: 10px solid red; /*보더를 주니 width가 300+25+25+10+10이 됨*/
/*너비가 달라지는 거 꼭 기억하자 */
}
div.ex3{
width: 300px;
padding: 25px;
background: lightblue;
border: 10px solid red;
/* padding 크기에 상관 없이 너비를 300px로 유지하자 */
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- padding + element width 관계-->
<div class="ex1">div.ex1 width=300px</div>
<br>
<div class="ex2">padding + width</div>
<br>
<div class="ex3">padding + width</div>
</body>
</html>
(3) outline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
border:5px solid gray;
padding:10px;
width:320px;
margin: 20px;
/*이미지랑 div태그랑 맞춘다면 */
/*
outline-width: ;
outline-style: ;
outline-color: ;
*/
outline: 4px dotted red;
/* outline-offset : 현재 div요소의 테두리(border)와 윤곽선(outline) 사이의 공간 */
outline-offset:15px;
margin: 30px;
}
</style>
</head>
<body>
<img src="../images/klematis4_big.jpg" alt="klematis" style="width:350px height:263px" />
<!-- div 요소 총 너비 계산 기억 -->
<div> width(350px)=320(너비)+20(패)+0(마)+10(보) </div>
</body>
</html>반응형