css中margin-top或者margin-bottom失效的解决方法
css中margin-top是设置容器的外间距了距离了,div嵌套后,margin-top或者margin-bottom失效了,在网上打到下面的方法可以解决。
设计页面的时候遇到一个神奇的问题,下面是html的代码
<body> <div class="homeNav"> <div class="homeCategory "> </div> </div> </body>
此时我设置子容器homeCategory的样式:
.homeCategory{ margin-top:30px; }
发现margin相对的父容器搞错了,找到body去了,成了相对于body来设置margin,此时设置了homeNav 的高度和宽度都没效果,让我抓狂不已,div都不听话了,调试了半天终于找到了原因。
原因:
在两个嵌套的div,如果外层div的父容器padding值为0,
那么内层div的margin-top或者margin-bottom的值会”转移”给外层div,也就是父容器的父容器。
解决办法:
1:设置父容器的的样式加上:overflow:hidden。
2:把对父容器的margin-top外边距改成padding-top内边距。
3:给父容器div加样式, padding-top: 1px。
4:给父容器div加样式,position: absolute。
5:把父元素变成一个 block formating context ,下面是可选的方法
a、float: left/right
b、position: absolute
c、display: inline-block/table-cell
d、overflow: hidden/auto
建议使用方法1。
(资源库 www.zyku.net)
上一篇:浏览器的User Agent Stylesheet解决方法
栏 目:CSS
下一篇:CSS代码实现三角形和饼图实例
本文标题:css中margin-top或者margin-bottom失效的解决方法
本文地址:https://www.zyku.net/css/1396.html
您可能感兴趣的文章
- 05-11修改CSS样式实现网页变灰色/黑白代码的几个方法整理
- 08-04CSS代码实现三角形和饼图实例
- 06-15HTML/CSS:div居中和div内部元素垂直居中
- 03-17javascript 动态生成css代码的两种方法
- 03-15Sublime Text 3的Less2Css插件介绍与安装
- 03-11Yii2 加载css、js 载入静态资源
- 03-10利用SublimeLinter 编写高质量的 JavaScript & CSS 代
- 02-27css控制文字过长裁剪后面跟着省略号
- 02-20写给喜欢用DW编写CSS人的一些建议
- 02-20Dreamweaver生成新页面css的类失效
- 04-10魅族18pro开启小窗模式教程
- 07-05Linux uupick命令
- 03-29vivos9分屏教程
- 11-28Git 提示fatal: remote origin alread
- 04-05oppo手机来电闪光灯开启教程
- 02-20解析zend studio中直接导入svn中的项
- 01-12快去水印-快去水印应用软件功能介绍
- 02-01红米k30管理热点连接人数方法
- 10-26帝国CMS 7.2火车头采集器免登录新闻发
- 01-12中银研修-中银研修应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 09-19荣耀magic3pro如何开启屏幕录制
- 03-22FileZilla FTP客户端连接阿里云虚拟主
- 10-13微信读书在哪里购买书本
- 05-16简单实现js点击展开二级菜单功能
- 07-05Linux file命令
- 04-24Python备份Mysql脚本
- 12-27爱试卷-爱试卷应用软件功能介绍
- 12-29一应欧拉-一应欧拉应用软件功能介绍
- 04-16Sublime Text编辑器如何显示顶部的菜
- 03-18小米flipbudspro开启防丢提醒方法