css第三节(2)

1、css外边距margin

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

合写:

margin:10px 0 20px 200px; 上 右 下 左外边距

margin:10px 200px;上下10px  左右200px

margin:0 auto;  上下0   左右自动居中(水平居中)

2、行内元素设置内外边距的影响

行内元素 不要给上下的margin和padding,上下的margin、padding会被省略,左右的margin、padding会起到作用

3、盒子内容的宽和高的占用空间

width和height是内容区域的宽高

盒子的宽度=左边距+左内边距(padding)+width+右padding+右边距

4、第一种外边距合并的情况

上盒子的下外边距20px,下盒子的上外边距是30px,两个盒子之间上下距离就是30px,不是50px

5、第二种外边距合并的情况

父元素无上内边距及变宽

则父元素的上外边框会和子元素的上外边距发生合并,合并后外边距为两者的较大者

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 9,745评论 9 85
  • 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 在CSS当中,相...
    dengpan阅读 3,696评论 0 0
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,542评论 0 1
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 3,975评论 0 3