다연이네

[days01] 여백(margine)과 패딩(padding) + outline 본문

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>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체  (0) 2020.12.03
[days01] max-width(height)와 오버플로우(스크롤바 외)  (0) 2020.12.03
[days01] 테두리 속성 (border-style, border-radius)  (0) 2020.12.03
[days01] CSS 투명도, 박스 위치 지정과 클릭시 맨 위로 이동하는 법, background  (0) 2020.12.03
[days01] CSS (구문 및 적용 방법)  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments