margin-left/margin-rightのサンプル

外部の上下左右のマージン(余白)を設定。基準は親タグ又は直前のタグからのマージンとなる。
(このブロック要素(P1)には、左マージンが40px、右マージンを40pxに設定)

このブロック要素(P2)には、左マージンが70px、右マージンを4cmに設定

このブロック要素(P3)には、左マージンが10px、右マージンを30%に設定

       
       
       

このブロック要素(P4)には、左マージンが-20px、右マージンを-1cmに設定

END

htmlsouse.gif (2461 バイト)

<style TYPE="text/css"><!--
    body {background:url(../../soft/imgcpb1/backe11.gif)}
    div {margin-left:7%;margin-right:5%;
            background:black;text-align:center}
    h2 {margin-left:0px;margin-right:0px;background:gray}
    .P1{margin-left:40px;margin-right:40px;background:seashell}
    .P2{margin-left:70px;margin-right:4cm;background:yellow}
    .P3{margin-left:10px;margin-right:30%;background:azure}
    .P4{margin-left:-20px;margin-right:-1cm;background:pink}
    .P5{margin-left:40%;margin-right:40%;background:red}
--></style>
</head>

<body>
<div>
    <h2>margin-left/margin-rightのサンプル</h2>
    <p class="P1">・・・(省略)・・・</p>
    <p class="P2">・・・(省略)・・・</p>
    <p class="P3">・・・(省略)・・・</p>
    <p class="P4">・・・(省略)・・・</p>
    <p class="P5">END</p>
</div>

END