解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果。
这种问题的解决方法如下:
1.给父元素加边框。
2.给父元素设置padding-top来代替给子元素设置margin-top。
3.内容生成(推荐)。代码如下:
element(父元素):before{
content:'';
display:table;
}
解决子元素设置margin-top,效果到父元素上的问题的更多相关文章
- 为什么子元素设置margin-top会作用在父元素上?
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 子元素设定margin值会影响父元素
有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 子元素设置margin-top作用到了父元素
子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解
- 给子元素设置margin-top无效果的一种解决方法
在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题 先是这么写的 <div style="margin-top:30px"> <a style= ...
- css 给inline和inline-block元素设置margin和padding
经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 子元素增加margin-top会增加给父元素的问题
假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...
随机推荐
- 微信SDK开发——接口接入
园子里面很多关于微信接口开发的文章,Github也一堆的开源代码. 官方文档地址:http://mp.weixin.qq.com/wiki/home/index.html 接下来主要以代码为主,接口说 ...
- c 高级函数的简单用法
c 中内置了很多高级的函数,我们先使用排序函数看一下 #include <stdio.h> #include <stdlib.h> #include <string.h& ...
- iOS 保存、读取与应用状态
固化 对于大多数iOS应用,可以将其功能总结为:提供一套界面,帮助用户管理特定的数据.在这一过程中,不同类型的对象要各司其职:模型对象负责保存数据,视图对象负责显示数据,控制器对象负责在模型对象与视图 ...
- 【原创】如何确定Kafka的分区数、key和consumer线程数
在Kafak中国社区的qq群中,这个问题被提及的比例是相当高的,这也是Kafka用户最常碰到的问题之一.本文结合Kafka源码试图对该问题相关的因素进行探讨.希望对大家有所帮助. 怎么确定分区数? ...
- .NET 实现并行的几种方式(二)
本随笔续接:.NET 实现并行的几种方式(一) 四.Task 3)Task.NET 4.5 中的简易方式 在上篇随笔中,两个Demo使用的是 .NET 4.0 中的方式,代码写起来略显麻烦,这不 .N ...
- 5分钟创建一个SpringBoot + Themeleaf的HelloWord应用
第一步:用IDE创建一个普通maven工程,我用的eclipse. 第二步:修改pom.xml,加入支持SpringBoot和Themeleaf的依赖,文件内容如下: <?xml version ...
- Jquery 页面间传值(非QuerryString)
实现原理: 实现方式不是很复杂,父页面A打开一个子页面 A1,并同时写一个带参数的接收数据函数Receive(result),在A1页面进行逻辑操作,然后调用父页面A的Receive(result)函 ...
- iframe关于滚动条的去除和保留
iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法 ...
- javascript 练习示例(一)
confirm 点确定返回true,点取消返回false prompt 点确定返回用户输入的字符串,点取消返回null 判断奇偶性 var isOdd = prompt('请输入你得的数字'); if ...
- Linux下安装JDK和Eclipse
安装步骤: (1)下载JDK (jdk-8u20-linux-x64.tar.gz) (2)卸载系统自带的开源JDK rpm -qa |grep java rpm –e java (3) ...