CSS属性之margin的理解

css属性改变容器的尺寸

  • 可以改变元素占据空间(如影响父元素的高度(当父元素不定高的情况下))
<html>
<style>
/*此处省略reset.css*/
.box1{background:gray;}
/*设置vertical-align:bottom 是为了解决img与父级元素之间留有空白的故障*/ 
.box2{height:200px;width:200px;background:gold;vertical-align:bottom;} 
</style>
<body>
<div class="box1"> 
    
![cat-5.png](http://upload-images.jianshu.io/upload_images/1819278-20366c1cd398bed2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div> 
</body> 
</html>

margin负值的应用

  1. margin负值下的两端对齐(margin改变元素尺寸)


    图片.png
  2. margin负值下的等高布局(margin改变元素占据空间)

通过设置margin-bottom为负值,padding-bottom为正值来实现。父元素需overflow:hidden;

  1. margin负值下的两栏自适应布局
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,033评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,169评论 1 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 2,023评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,162评论 0 1
  • 每一个人游戏里面都有属于你的英雄,若水三千,只取一瓢。 王者荣耀玩的人都知道它有多火,从我刚刚开始玩的时候只有50...
    风重阅读 828评论 35 11

友情链接更多精彩内容