博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css——margin-top或者margin-bottom失效
阅读量:7024 次
发布时间:2019-06-28

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

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

转载于:https://www.cnblogs.com/llhBlog/p/6180518.html

你可能感兴趣的文章
LVS简单介绍
查看>>
自动化清除分区与建立分区脚本
查看>>
我的友情链接
查看>>
VMWare tools的安装过程及文件共享设置
查看>>
以符合人类阅读的方式打印php数组
查看>>
单例模式
查看>>
从今天开始记录汇编的学习过程
查看>>
HA集群基础
查看>>
web-基本应用
查看>>
js的原型链
查看>>
linux监控系统_Zabbix安装步骤及配置V1.1(3)
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
【夔堂】菜鸟神灯:视频《秒懂五大编程思想》
查看>>
linux中用户、组的管理(密码管理、权限管理及其修改用户、组)
查看>>
OOP design table chair bench
查看>>
linux下软硬链接建立
查看>>
Python多线程
查看>>
sql server 2008 非域环境下数据库镜像配置
查看>>
Linux 系 统 目 录 详 解
查看>>