CSS 基本チュートリアル: パディングとマージンのプロパティ
CSS パディング屬性: 境界線とコンテンツの間の距離
注: 通常、幅と高さの屬性と呼ばれる屬性は、內(nèi)側(cè)と外側(cè)のマージンと境界線を除いた、コンテンツの幅と高さを指します。
padding-left: 左內(nèi)側(cè)のパディング距離、左の行とコンテンツの間の距離。
padding-right: 右內(nèi)側(cè)のパディング距離、右行とコンテンツの間の距離。
padding-top: 上部の內(nèi)部パディング距離、上端とコンテンツの間の距離。
padding-bottom: 下部パディングとコンテンツへの下部行との間の距離。
省略形
padding:10px; //四辺の內(nèi)側(cè)のパディングはそれぞれ10pxです
padding:10px 20px; //上下は10pxですare 20px
padding :5px 10px 20px; //上は5px、左右は10px、下は20px
padding:5px 10px 15px 20px; //順序は「上、右、下、左"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。
</div>
</body>
</html>
CSS margin プロパティ: 側(cè)線から外側(cè)への距離
margin-left: 左側(cè)の線から外側(cè)への距離。
margin-right: 右サイドラインからアウトサイドまでの距離
margin-top: トップサイドラインからアウトサイドまでの距離。
margin-bottom: ボトムラインから外側(cè)への距離。
省略形
margin:10px; //4つの余白は10px
margin:10px 20px //上下の余白は10px、左右の余白は20px
margin: 5px 10px 15px; //上マージン 5px、左右マージン 10px、下マージン 15px
margin:5px 10px 15px 20px; //順序は「右上、左下」である必要があります
;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
margin:20px;
}
</style>
</head>
<body>
<div class="box">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。
</div>
</body>
</html>注: パディングとマージンは混同しやすいため、2 つの例の出力の違いを注意深く観察してください
