博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浅谈padding与margin
阅读量:6223 次
发布时间:2019-06-21

本文共 654 字,大约阅读时间需要 2 分钟。

padding的用法:

  1:padding是添加在父元素(盒子)上的;

  2:padding用来控制子元素在父元素里面的位置关系;

  3:padding会把盒子撑大;

  4:如果想让盒子保持原有的大小,在盒子宽度的基础上减掉padding值;

  5:给单一一个方向添加padding值:padding-left /right /top /bottom;

  6:padding设置方法:padding:10px(四周);padding:10px 20px(上下  左右);

  7:padding不会对背景图造成影响;

  8:padding不支持负数;

 

margin的用法:

  1:margin是长在盒子外围的;

  2:调整元素与元素之间的位置关系

  3:margin不会对盒子本身的宽高造成影响;

  4:margin支持负数

  5:给单一一个方向添加margin值:margin-left /right /top /bottom;

  6:margin常见的BUG:

    a:如果父元素没有浮动以及第一个元素没有子元素没有浮动,直接往第一个子元素上面添加margin-top,会错误的把margin-top解析到父元素上面;

    b:相邻两个同级元素。上下margin值不会添加,会按照最大值去设置;

  8:margin:0 auto;让当前元素在父元素里面左右居中。

 

转载于:https://www.cnblogs.com/4813html/p/10500688.html

你可能感兴趣的文章
More than 100 ABAP Interview Faq's(2)
查看>>
Apache Solr查询语法
查看>>
Javascript中typeof instanceof constructor的区别
查看>>
jenkins忘记管理员登陆密码的补救措施
查看>>
[LeetCode] Sliding Window Maximum 滑动窗口最大值
查看>>
Loopup集合类笔记
查看>>
ylbtech-LanguageSamples-Unsafe(不安全代码)
查看>>
Unable to connect to any of the specified MySQL hosts.
查看>>
Android屏幕尺寸适配注意事项
查看>>
JAVA代码中加了Try...Catch的执行顺序
查看>>
三个c#入门小程序
查看>>
docker中使用systemd
查看>>
[模拟电路] 1、模拟调制、解调电路原理
查看>>
Android Nine Patch图片及按钮背景
查看>>
在.NET中调用Oracle9i存储过程经验总结
查看>>
Eclipse崩溃后无法启动的问题解决
查看>>
Android Studio git ignore
查看>>
springmvc
查看>>
22.2. 用户认证
查看>>
1.7. User interfaces
查看>>