div,margin,padding

時間 2019-11-10

標籤 div margin padding 欄目 CSS 简体版

原文原文鏈接

<!-- 類比禮品盒裏裝方塊月餅。月餅的食用部分（咱們把它稱之爲月餅肉身）要裝在小包裝盒裏，月餅肉身即爲content。月餅肉身與直接包裹它的小包裝盒（咱們把它叫作月餅的衣服）之間的距離叫padding。其中月餅的衣服厚度叫border。月餅的衣服與月餅禮品盒之間的距離叫margin。-->
<!-- css中的width和height指的是content的寬度和高度 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />    
        <style type="text/css">    
            body{    
                margin:0px;    
            }    
    
            .test1{    
                width:150px;    
                height:150px;    
                border:6px solid red;    
            }    
    
            .test2{    
                margin-top:40px;    
                padding-top:40px;    
                width:150px;    
                height:150px;    
                border:6px solid gray;    
            }    
    
            .test2_son{    
                width:80px;    
                height:50px;    
                border:12px solid blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div class="test1">test1</div>    
        <div class="test2">    
            <div class="test2_son">test2_son</div>    
        </div>    
    </body>    
</html>

test1

test2_son

1. margin padding
2. margin+padding
3. Margin，Border，Padding
4. 【flutter】padding和margin
5. Androd Margin ,Padding
6. margin padding border
7. margin與padding
8. padding和margin
9. 初識margin與padding
10. Margin和padding失效
更多相關文章...
• jQuery Mobile 網格 - jQuery Mobile 教程
• XSL-FO inline-container 對象 - XSL-FO 教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。