padding이 Margin에 미친 영향에 대한 간단한 소개

4319 단어
padding이 Margin에 미친 영향에 대한 간단한 소개: 아마도 많은 초보자들이 padding이 Margin의 바깥쪽 거리에 영향을 미칠지 잘 모를 것이다.코드 세그먼트 테스트를 한 번 해 보면 알 수 있습니다. 먼저 코드 실례를 보십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
#box{
  width:150px;
  height:150px;
  background-color:green;
  padding:10px;
}
#inner{
  width:50px;
  height:50px;
  background:red;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

위 코드는 바깥쪽 여백이 없을 때 다음에 바깥쪽 여백을 더한 경우를 보십시오. 코드 인스턴스는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
#box{
  width:150px;
  height:150px;
  background-color:green;
  padding:10px;
}
#inner{
  width:50px;
  height:50px;
  background:red;
  margin-left:10px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

위의 코드 표현을 통해 알 수 있듯이padding은margin의 바깥쪽 거리에 영향을 미친다.
원래 주소:http://www.softwhy.com/forum.php?mod=viewthread&tid=18050
자세한 내용은 다음을 참조하십시오.http://www.softwhy.com/divcss/

좋은 웹페이지 즐겨찾기