marginでの％使用例

margin設定での％指定

＜div style="margin-left:5%"＞

＜p style="margin-left:50%"＞

＜div style="margin-left:10%"＞

＜p style="margin-left:7%"＞

＜p style="margin-left:50%"＞

margin-leftの設定無し

＜p style="margin-left:10%"＞

＜p style="margin-left:-10%"＞

</div>

*** ％は現在のｳｨﾝﾄﾞｳ幅(ﾌﾚｰﾑではﾌﾚｰﾑ幅)から計算される。margin-leftの場合、その計算結果を親ﾀｸﾞの左側を基点にしてmarginされる。

<body>
<div style="margin-left:5%;background-color:silver">
    <p>＜div style="margin-left:5%"＞</p>
    <p style="margin-left:50%;background-color:thistle">
        ＜p style="margin-left:50%"＞</p>
<div style="margin-left:10%;background-color:pink">
    <p>＜div style="margin-left:10%"＞</p>
    <p style="margin-left:7%;background-color:lightblue">
        ＜p style="margin-left:7%"＞</p>
    <p style="margin-left:50%;background-color:yellow">
        ＜p style="margin-left:50%"＞</p>
    <p style="background-color:wheat">
        margin-leftの設定無し</p>
    <p style="margin-left:10%;background-color:white">
        ＜p style="margin-left:10%"＞</p>
    <p style="margin-left:-10%;background-color:yellow">
        ＜p style="margin-left:-10%"＞</p>
    <p></div></p>
</div>
    <p></div></p>
</div>

END