1. 程式人生 > 其它 >盒子模型(框模型)——內邊距

盒子模型(框模型)——內邊距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型(框模型)——內邊距</title>
        <style type="text/css">
            /* 
                內邊距
                    盒子的可見框大小由內容區,內邊距共同決定
                    邊框和內容區之間的邊距叫做內邊距(padding)
                    一共有四個方向的內邊距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-right
                    簡寫屬性:padding同時設定四個方向的內邊距
             
*/ .box{ width: 100px; height: 200px; border: 1px red solid; padding: 10px 20px 30px 40px; } .box1{ width: 100%; height: 100%; background-color: #FFFF00; }
</style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>