html中元素的padding属性与margin属性

小灰灰 2022-08-19 08:23 237阅读 0赞

padding
    padding-top
    padding-right
    padding-bottom
    padding-left
    
    margin
    margin-top
    margin-right
    margin-bottom
    margin-left

padding: 上、右、下、左; \{从上按顺时针转的\}  
  
![o_0912908.png][]  
![o_0912909.png][]  
![o_0912910.png][]  
![o_0912911.png][]  
![o_0912912.png][]

--------------------

可用 padding-top、padding-bottom、padding-left、padding-right 分别表示:  
  
![o_0912913.png][]

--------------------

如果 padding 属性缺失 right、bottom、left; 就都参考 top:  
  
![o_0912914.png][]

--------------------

如果 padding 属性缺失 bottom、left; bottom 会参考 top, left 会参考 right:  
  
![o_0912915.png][]

--------------------

如果 padding 属性缺失 left; left 会参考 right:  
  
![o_0912916.png][]

--------------------

外边距 margin 和内边距 padding 道理是一样的:  
  
![o_0912917.png][]

--------------------

[o_0912908.png]: /images/20220731/5025a3ba891346b98acf19fe6a8a57b4.png
[o_0912909.png]: /images/20220731/1ef5114188864b06bbec37c98031afe2.png
[o_0912910.png]: /images/20220731/fab3f38af4e94801abb714f293745177.png
[o_0912911.png]: /images/20220731/428be1c28c4749d19abff1b672075df5.png
[o_0912912.png]: /images/20220731/7a2475f8346b4c788a9c8ebb6abc3fe4.png
[o_0912913.png]: /images/20220731/7e0541235b2c4c37a4b7621edd799b5f.png
[o_0912914.png]: /images/20220731/fc004b036aef48b99e15bd19ae798df1.png
[o_0912915.png]: /images/20220731/9bf545e23f1e4873a3c1188c68c88455.png
[o_0912916.png]: /images/20220731/0d9dfa3106634c00a2779fe5fcf32f78.png
[o_0912917.png]: /images/20220731/32c5316a199e40ae81adb7975ad13468.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 元素与属性

HTML 元素 -------------------- HTML 文档由 HTML 元素定义。 -------------------- HTML 元素 <

短命女/ 2023年10月13日 08:14/ 0 赞/ 39 阅读

相关 Android padding/margin/gravity 属性

1，layout\_width & layout\_height 设置Layout中组件的宽度和高度： ![watermark_type_ZmFuZ3poZW5naG

客官°小女子只卖身不卖艺/ 2023年06月19日 10:00/ 0 赞/ 49 阅读

相关十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

在jQuery官方文档中，分别是这样对应的。属性：Attributes；CSS：CSS。区分DOM属性和HTML元素属性 HTML元素的属性大家应该都知道，比如<img>

╰半橙微兮°/ 2022年10月03日 00:32/ 0 赞/ 298 阅读

相关 HTML标签margin和padding的默认属性值

一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。在chrome中：16,15,14,1

「爱情、让人受尽委屈。」/ 2022年09月25日 12:27/ 0 赞/ 330 阅读

相关 CSS padding margin border属性详解

图解CSS padding、margin、border属性 ![191935269513751.jpg][] W3C组织建议把所有网页上的对像都放在一个盒(box)

本是古典何须时尚/ 2022年09月25日 09:20/ 0 赞/ 207 阅读

相关 html中元素的padding属性与margin属性

padding padding-top padding-right padding-bottom padding-left

小灰灰/ 2022年08月19日 08:23/ 0 赞/ 238 阅读

相关 CSS padding margin border属性和布局

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(co

你的名字/ 2022年08月19日 01:54/ 0 赞/ 256 阅读

相关 RelativeLayout中Margin属性

我们玩游戏时，经常弹出来广告页面窗口，在图片的右上角有一个取消按钮，这个按钮有一部分在广告内容里面，一部分在外面，今天就来实现这个样式。 activity\_m

迷南。/ 2022年08月09日 15:49/ 0 赞/ 226 阅读

相关 html —— 查看元素属性与 js 全局属性

算是一个意外的收获，所以记录下。查看元素的全部属性与事件：使用 console.log() 打印元素，查看完整属性与事件。查看js 全局属性与事

一时失言乱红尘/ 2022年06月07日 06:18/ 0 赞/ 307 阅读

相关 CSS padding、margin、border属性

转自：[http://www.cnblogs.com/linjiqin/p/3556497.html][http_www.cnblogs.com_linjiqin_p_3556

约定不等于承诺〃/ 2022年05月15日 12:13/ 0 赞/ 300 阅读