CSS中的padding和margin属性

xiaoxiao2021-02-28  71

直接看例子:

1.margin的用法

1)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:280px;margin:10px "> </div> </div>

2)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:260px;margin:10px 20px "> </div> </div>

3)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:260px;margin:15px 15px 5px 25px "> </div> </div>

2. padding的用法

1)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:260px;padding:10px 8px 4px 18px "> </div> </div>

2)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:260px;padding:10px 8px "> </div> </div>

3)

<div style="height:70px;width:300px;border:1px solid green;"> <div style="background-color:red;height:50px;width:260px;padding:10px "> </div> </div>

总结:margin 表示给标签自己外边加边距。padding则是给标签内部加边距。但两者的用法一致:

1)只有一个参数:表示上下左右边距都是此参数。

2)两个参数:第一个参数表示上下边距数值,第二个参数表示左右边距数值。

3)4个参数:依次表示上边距,右边距,下边距,左边距数值。

此外:border边框的(线的种类)参数用法也与上述用法一致。

转载请注明原文地址: https://www.6miu.com/read-2613442.html

最新回复(0)