CSS 基本チュートリアル: パディングとマージンのプロパティ

CSS パディング属性: 境界線とコンテンツの間の距離

注: 通常、幅と高さの属性と呼ばれる属性は、内側と外側のマージンと境界線を除いた、コンテンツの幅と高さを指します。

padding-left: 左内側のパディング距離、左の行とコンテンツの間の距離。
padding-right: 右内側のパディング距離、右行とコンテンツの間の距離。
padding-top: 上部の内部パディング距離、上端とコンテンツの間の距離。
padding-bottom: 下部パディングとコンテンツへの下部行との間の距離。
省略形

padding:10px; //四辺の内側のパディングはそれぞれ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">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

CSS margin プロパティ: 側線から外側への距離

margin-left: 左側の線から外側への距離。
margin-right: 右サイドラインからアウトサイドまでの距離
margin-top: トップサイドラインからアウトサイドまでの距離。
margin-bottom: ボトムラインから外側への距離。
省略形

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">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

注: パディングとマージンは混同しやすいため、2 つの例の出力の違いを注意深く観察してください

学び続ける

新しいファイル

<!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">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。 </div> </body> </html>

提出するリセットコード

自動運転