CSS (margin, padding)
margin, padding
개요
margin
: 바깥쪽 여백
padding
: 안쪽 여백
사용법
margin: 10px: 상하좌우 모두 10pxmargin: 10px 20px: 상하 10px, 좌우 20pxmargin: 10px 20px 30px 40px: 상 10px, 우 20px, 좌 30px, 하 40pxmargin: 10px 20px 30px: 상 10px, 좌우 20px, 하 30px
<style>
#box4{ margin: 10px; padding: 10px 20px; }
</style>예제
<head>
<style>
.box-container{
display: inline-block;
background-color: skyblue;
border: 2px solid blue;
margin: 5px 15px;
}
.box-container div{
width: 120px;
height: 80px;
background-color: pink;
border: 2px solid red;
font-size: 15px;
}
#box1{ margin: 10px; padding: 0px; }
#box2{ margin: 5px 25px; padding: 0px; }
#box3{ margin: 0; padding: 10px 30px 5px; }
#box4{ margin: 10px; padding: 10px 20px; }
#box5{ margin: 10px 30px 0 50px; padding: 30px 0px;}
</style>
</head>
<body>
<p>box1</p>
<div class="box-container">
<div id="box1">m: 10<br>p: 0</div>
</div>
<p>box2</p>
<div class="box-container">
<div id="box2">m: 5 25<br>p: 0</div>
</div>
<p>box3</p>
<div class="box-container">
<div id="box3">m: 0<br>p: 10 30 5</div>
</div>
<p>box4</p>
<div class="box-container">
<div id="box4">m: 10<br>p: 10 20</div>
</div>
<p>box5</p>
<div class="box-container">
<div id="box5">m: 10 30 0 50<br>p: 30 0</div>
</div>
</body>
</html>출력결과
Author And Source
이 문제에 관하여(CSS (margin, padding)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pc_jin/CSS-margin-padding저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
