html+css-内层div设置margin-top不起作用

最新推荐文章于 2021-06-18 03:32:16 发布

原创最新推荐文章于 2021-06-18 03:32:16 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了解决子元素设置margin-top导致父容器高度不准确的问题。提供了五种解决方案，包括使用overflow:hidden、float、position:absolute、padding-top属性及将margin-top替换为padding-top的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：子元素设置margin-top作用于父容器

解决方法：

1、给父容器box加overflow：hidden属性

2、给父容器加float属性。

3、给父容器加position：absolute属性。

4、给父容器加padding-top属性。

5、把子容器margin-top换为padding-top。

See the Pen 问题:内层div设置margin-top不起作用 by tombflylee (@tombflylee) onCodePen.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tombflylee1992

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

韩顺平html+css+javascript-----div+css笔记

12-07

本笔记主要介绍了DIV+CSS的基本概念和应用，涵盖了DIV的介绍、CSS的基本语法、CSS的分类、使用CSS统一网站风格、使用滤镜等内容。 DIV+CSS是什么？ ---------------- DIV是HTML中的一个元素，用于存放HTML元素、...

DIV多层嵌套margin-top的BUG问题

09-25

当一个`<div>`元素作为另一个`<div>`的子元素，并且它们之间没有其他元素分隔时，Firefox会将内层`<div>`的`margin-top`值应用于其父元素。这种行为在Internet Explorer 6和7中并不发生，而在IE8以及更现代的浏览器...

参与评论您还未登录，请先登录后发表或查看评论

DIV+CSS中DIV嵌套margin_top不起作用的解决方法

weixin_33671935的博客

11-05

159

网站排版中DIV+CSS中DIV嵌套margin_top不起作用的解决方法在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...

html,给内层的div设置margin-top不起作用

乐~的博客

07-03

2637

效果：解决方法：

关于内层DIV设置margin-top不起作用的解决方案

asdfgh0077的博客

11-22

2791

关于内层DIV设置margin-top不起作用的解决方案

div嵌套导致子区域margin-top失效不起作用的解决方法

weixin_34268169的博客

10-08

466

有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div，使父元素产生上外边距。 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/...

Css嵌套DIV，内层DIV设置margin-top失效的解决办法（转）

weixin_30826761的博客

04-24

175

问题：在使用DIV做嵌套的时候，（外层DIV暂且取名叫做OuterDIV，内层DIV暂且取名叫做InnerDIV），本来想使InnerDIV距离OuterDIV左边距50px，上边距50px，我是新人，自然想到使用margin-left and margin-top来设置，效果是margin-top并未起作用。原因：DIV没有获得hasLayout 解决方案： 1. OuterDIV设置p...

html-css-naruto:火影是使用html+css构建的。使用html构建内容，css添加样式。不嵌套，使用相对位置

06-26

在CSS中，属性如`color`用于设置文字颜色，`background-color`用于设置背景色，`font-family`用于设定字体，`width`和`height`用于设置元素尺寸，`padding`和`margin`则用于调整元素内部和外部的空间。这些基本属性...

用div+css+ul-li打造清晰横向导航栏教程

在这段CSS代码中，`#navigation`选择器针对`<div>`元素设置了背景颜色，并将`ul`列表的默认样式清除。`#navigation li`设置为`inline`显示，使得列表项水平排列。链接（`a`标签）的样式通过添加内边距和悬停效果来...

「HTML+CSS」--自定义按钮样式【001】

08-05

在提供的压缩包文件中，虽然没有具体的003a文件内容，但我们可以推测这可能是相关的代码示例、图片或教程文档，进一步阐述了如何应用上述概念来创建和自定义HTML和CSS按钮。学习这些材料可以帮助深化对这一主题的...

css中对于盒子模型margin属性的思考---margin折叠问题

liyangready的专栏

07-18

1164

今天发现了一个奇怪的现象：在两个嵌套div中，子div设置了margin属性，竟然会影响到父div，就是会把父div撑大，但我在父div加入了overflow：hidden之后显示正常。开始查阅相关资料，找到了margin折叠问题。 margin折叠的规则两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素/inline-block的元素/绝对定位元素的ma

html margin-top 不起作用

风华绝代的博客

01-13

1万+

margin-top不起作用

html设置margin无效,设置margin-top无效_html/css_WEB-ITnose

weixin_29272301的博客

06-18

803

本帖最后由 Jasmine_xiaocao 于 2013-01-25 09:57:12 编辑左右结构-float头部左右结构实现方法：left设置float为left浮动，right设置float为right浮动，可实现左右结构缺陷：当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题左右结构实现方法：left设置float为left浮动，right设置f...

css布局中margin为0，但依然有间距问题的解决方法

热门推荐

UaoSonic

05-17

1万+

在进行布局时经常会出现，div与div之间虽然设置为了margin: 0px ，但是依然有间距的问题，比如以下这种情况：html部分代码如下：<body> <div class="main"> <div class="content"> <div class="Sbox"> <div class=

css margin-top设置html元素之间的距离

weixin_33775572的博客

10-08

1044

css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离。这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例，需要的朋友可以参考一下。 css margin-top介绍 css margin-top属性指从某一元素的上边框开始，到另外一个相邻的元素的下外边距之间的距离。每一个元素都存在着外边距。两个相邻的元素之间是靠它们的外边距排...

DIV CSS层内层的绝对和相对定位案例

菜鸟起步

09-10

752

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">绝对定位和相对定位的案例.dd {height: 300px;position:relative;width: 500px; background:#333;}.ff {width:100px;height:100px; ba

HTML里子DIV设置margin-top后影响父DIV位置的解决办法

weixin_44341110的博客

04-17

1456

在HTML里，子DIV元素设置了margin-top后，在与父元素之间没有任何其他元素的情况下，会影响到父DIV的位置。一、编写代码。 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div style="width:100%; height:400px;background-color:blue"> <div style="width:80%;he

firefox margin-top失效的原因与解决办法

lqc851011的专栏

01-22

518

为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地，切莫

javascript-MDN学习笔记-Array部分

u011300580的博客

02-22

1632

创建一个数组 var fruits = ["Apple", "Banana"]; console.log(fruits.length); // 2 通过索引访问数组元素 var first = fruits[0]; // Apple var last = fruits[fruits.length - 1]; // Banana 遍历一个数组 fruits.forEach(fu