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

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

tombflylee1992

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

阅读量607

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011300580/article/details/55194228

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

问题：子元素设置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
评论
html+css-内层div设置margin-top不起作用

See the Pen 1-01控制Div属性 by tombflylee (@tombflylee) onCodePen.
复制链接

扫一扫

专栏目录

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

09-25

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

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

12-07

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

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

html margin-top 不起作用

风华绝代的博客

01-13

1万+

margin-top不起作用

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

weixin_33671935的博客

11-05

118

网站排版中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

2574

效果：解决方法：

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

liyangready的专栏

07-18

1117

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

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

asdfgh0077的博客

11-22

2750

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

CSS+DIV-盒子模型示例.zip

11-03

**CSS+DIV 盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念，它将...

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

08-05

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

DIV+CSS 网页布局心得

09-27

**DIV+CSS网页布局心得** 在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将...

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

weixin_29272301的博客

06-18

738

本帖最后由 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-top设置html元素之间的距离

weixin_33775572的博客

10-08

982

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

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

lqc851011的专栏

01-22

471

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

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

weixin_44341110的博客

04-17

1375

在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

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嵌套DIV，内层DIV设置margin-top失效的解决办法（转）

weixin_30826761的博客

04-24

138

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

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

weixin_34268169的博客

10-08

414

有两个嵌套关系的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/...

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

菜鸟起步

09-10

708

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

javascript-MDN学习笔记-Array部分

u011300580的博客

02-22

1543

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

div+css布局实例：网页居中、内容垂直居中与层透明度

在现代网页设计中，利用Div+CSS进行网页布局是一种常见的技术，它提供了更多的灵活性和控制力。本文将介绍三个实用的Div+CSS实例，帮助你更好地理解和掌握这种布局技巧。 1. 网页整体居中: 设置网页整体居中的关键...