CSS (margin, padding)
margin, padding
概要
margin
:外側余白padding
:内側余白
使用方法
margin: 10px
:上下左右共10 pxmargin: 10px 20px
:上下10 px、左右20 pxmargin: 10px 20px 30px 40px
:上10 px、右20 px、左30 px、下40 pxmargin: 10px 20px 30px
:上10 px、左右20 px、下30 px<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>
出力結果
Reference
この問題について(CSS (margin, padding)), 我々は、より多くの情報をここで見つけました https://velog.io/@pc_jin/CSS-margin-paddingテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol