HTML5基礎加強css樣式篇（右外邊距失效問題解釋）（四十八）

厚積薄發2017發表於2017-04-21
HTMLCSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box-wrapper {
            width: 500px;
            height: 500px;
            background-color: orange;
        }
        .box{
            width: 400px;
            height: 200px;

            margin: 0 auto;
            /*當父元素水平空間不足，設定右外邊距失效，優先保證左外邊距*/
            margin: 0 200px;
        }
        .box-1{
            background-color: pink;
        }


    </style>
</head>
<body>

<div class="box-wrapper">
    <div class="box box-1"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>

相關文章