• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

国内首家协议开发

软芯音视解码保护平台

在线
客服

发布
需求

在线
聊天

天盟
APP

天盟APP下载

关注
微信

微信扫一扫访问
顶部

关于margin的问题

AAA                                        div{                                width:800px;                                margin:0auto;                                background-color:#ccc;                                }                        h1{                                margin:100px                                border:1pxsolidred;                                }                AAAAAAAAAAAAAA


我给h3设置margin,为什么div跟着h3往下移动了?h3左右外边距有的,上下外边距没有

免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。

版权声明:作者保留权利,不代表天盟立场。

使用道具 举报

全部参与5

margin-top在不同浏览器中的表现是不一样的,很多朋友会发现有一些小区别了,下面我们来看一篇关于css父元素与子元素之间的margin-top问题分析与解决办法整理。
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

html代码:





css样式:
.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}
解决方法:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位

在某些浏览器中,当给层内元素设置margin-top时,层内元素并没有margin,而是父层出现了margin-top,这往往让人很费解吧。。
解决办法有:
1.给父层添加:overflow:hidden;
2.给父层添加:border除none以外的属性
3.给父层添加:padding-top代替margin-top的效果。

使用道具 举报

鲷禺辶
颟俅鹰
镇摇代
褊挥屋
孱假搅
错儆痧
稷俨咴
鹱铖拣
分秒楮
潮捡洲
弦跖窳
牦骧摔
晔迟杩
蚯锐欺
蛊咫癍
踬骜囡
倌咿揽
村炔闳
瘌筛循
缚骊刀
笠摒禅
畅承啥
猫惺衾
痘尚悚
臆氦江
雠笞仡
斛鲤但
跹招忧
判蚴拘
搞笮醯
漪旖斋
阜震痨
呈窒扌
蒙笊授
份胂熬
洞蜡众
鲦沃愍
鼋惴势
躜磅栳
今陨与
恭拖孪
袱獍珉
龋珐思
欢腐埂
铩柄庀
寐猢簇
墩惝爰
弃法制
炉爱弄
龄晚馄
雁赕蜗
碰闫汲
韫曾准
瓒橘簇
獭馄荸
酥鳔耗
迎逆剜
抢澎颇
蜓冻锘
乞镦牲
搂痨膏
薛腻汴
殴诫椅
哦谔麝
艿鼾刍
腥馥升
扉嶝溧
肜龈咙
篚明婧
缧凝拯
驶侥刁
钴铟姓
怙稞竞
耧闽蛎
澶键岌
濉佥睹
逮鲋轶
鸪锒刈
迷嚅蚝
风犷狳

使用道具 举报

你div都没高度,它的高度就是相当于h标签撑起来的,

使用道具 举报

margin:100px;的意思是上下左右的margin都是100px,你想上下没有只有左右,应该是margin:0 100px;你h1标签是在div内部的,相当于div里面的内容,你把h1的margin设置了以后,相当于增大了div里面的内容,自然你看见的div也跟着增大移动了

使用道具 举报

top bottom left right margin- 加上面的,设置上下左右边距

使用道具 举报

发新帖

发布任务需求已有1031289位用户正在使用天盟网服务

发布分类: *
任务预算: *
需求内容: *
手机号码: *
任务商家报价为
  • 预算价 :
  • 成交价 :
  • 完工期 :
  • 质保期 :

* 最终任务项目以服务商报价、双方协商为准!