HtmlCss. 16. 문제//padding 과 margin

문제

정답

내 풀이

<div>안녕하세요.</div>
<section>잘가세요.</section>

div{
  color : yellow;
  background-color : red;
  border :  10px solid black;
  width : 30%;
  text-align : center;
  margin : 0;
  padding : 5rem 7rem;
  font-size : 3rem;
  font-weight : bold;
  display : inline-block;
}
section{
  color : yellow;
  background-color : blue;
  border :  10px solid black;
  display : inline-block;
  text-align : center;
  margin :  0 0 0 15%;
  font-size : 3rem;
  font-weight : bold;
}

선생님 풀이

<div>안녕하세요.</div>
<section>잘가세요.</section>

div{
	color : gold;
	background : red;
	display : inline-block;
	border : 3px solid black;
	font-size : 3rem;
	font-weight : bold;
	padding : 80px;
	margin-right : 50px;
}

section{
	color : gold;
	background : red;
	display : inline-block;
	border : 3px solid black;
	font-size : 3rem;
	font-weight : bold;

}

핵심사항

padding

• 태그 안의 여백영역을 조절함
• 태그 자체를 키워서 내용과 엘리먼트에 공백을 만들어줌

margin

• 태그 밖의 여백영역을 조절함
• 태그를 키우기보다는 태그와 태그사이의 공백과 간격을 유지할 때 주로 사용함

padding&margin 사용법

• margin : 10px ; > 상하좌우에 다 10px씩 영향을 줌
• margin : 20px 10px ; > 상하/좌우에 각각 영향을 줌
• margin : 40px 30px 20px 10px ; > 상 우 하 좌 순서로 영향을 줌 (시계방향)