父级有padding，子div设置margin，起始位置参照谁的问题

最新推荐文章于 2024-07-10 14:12:35 发布
最新推荐文章于 2024-07-10 14:12:35 发布
阅读量284 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html和css 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cutemurphy/article/details/6712050
本文通过一个简单的实验探讨了CSS中div元素的margin-left属性是如何相对于其父元素的padding工作的。这有助于理解网页布局中元素间间距的计算方式。

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

（1）

做了个实验:

<div id="f">

    <div id="s"></div>

</div>

结果是，s的margin-left值是相对于padding后的位置，而不是f的边框。如果不是这样,padding还有什么意思，所有都要从最开始处重新计算的话。

（2）

html无序列表位置改变,如何设置子无序列表的位置？
weixin_39946327的博客
06-05 1069
我有一个导航栏与儿童无序列表嵌套在主导航栏项下。我的问题是在内部列表中，当我绝对定位，内部列表居中到页面，并且当我定位相对时，它与父列表内联定位。如何设置子无序列表的位置？我想让第一个子项直接排列在它的父项下。/* OUTER LIST STYLING */div#navbar2 {position:relative;width: 100%;border-top: solid #000 1px;b...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 9316
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
父级使用padding后子元素绝对定位的BUG(转)
最初的梦想
10-04 1043
以前遇到过，今天又无意中看到了别人总结的，害怕遗忘，还是记下来：～～～   在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。 在父层使用position:relative;和padding（当然0值...
父元素设置了padding，子元素如何忽略掉这个padding
weixin_43821171的博客
08-18 7574
背景： 现如今在进行前端开发时，为了能够快速的构建项目，我们往往会使用到现存市面上封装好的一些ui组件库，比如vue的element组件库，react的ant-design，但在使用这些组件库时，往往会出现比较让我们头疼的情况，那就是有的组件封装有中间层，不对外暴露，这让我们很难设置这个中间元素的样式。今天在项目开发时我就遇到了这个问题，使用的一个组件对外暴露的两层中还插入了一个div，而这个div设置了padding的值，正常来说，我是无论如何都改变不了这个父元素的padding的值，但这就与我的设计图不
html元素水平垂直居中父级,CSS子元素在父元素中水平垂直居中的几种方法
weixin_32306885的博客
06-16 491
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。#div1{width: 300px;height: 300px;border: 1px solid red;}#div1 p {width: 100px;height: 100px;background-color: green;/*float: left; ...
offsetTop的计算判断，父级与自身修改position时原点的位置判断及pandding造成的影响
lk2913128603的博客
07-10 465
offsetTop的计算判断，父级与自身修改position时原点的位置判断及pandding造成的影响
CSS3 transform-origin属性设置元素旋转起始位置
weixin_44167504的博客
09-05 3839
CSS3 transform-origin属性 作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。 使用：transform-origin：x-axis y-axis z-axis; x-axis取值：left、right、center、length、% y-axis取值：top、bottom、center、length、% z-axis取值：length transform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%） tran
html的div位置
热门推荐
chpllp的博客
11-07 1万+
原文：https://blog.youkuaiyun.com/afeichuanqi/article/details/53991951  position：一般用absolute和relative，分别是绝对定位和相对定位，以原点的距离为单位； margin：有margin-top,margin-bottom,margin-left,margin-right 调节外边距； Padding：有Paddin...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
weixin_30092051的博客
06-04 1944
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。1.css的transition。语法：transition: property duration timing-function delay;property:填写需要变化的css属性如：width,line-...
css控制滚动条起始位置距离顶部的距离
02-20
或者，在内容元素上添加margin-top或padding-top，并设置容器的高度，这样当内容超出容器高度时，滚动条的起始位置会考虑到这个间距。例如，容器高度为500px，内容有一个padding-top: 50px，当内容足够长时，滚动条...
div怎么设置竖线
最新发布
06-10
在CSS中，在div中设置竖线有几种常见方法，根据具体布局需求选择合适方案：###方法1：使用border属性（适合分割区域）直接在div元素上添加左侧或右侧边框作为竖线：```css.vertical-line{border-left:1pxsolid#000;...
在HTML5和CSS中，图像的原点位置（或称为基准点）通常是指图像在其容器（如`＜div＞`元素或其他任何元素）中的起始位置
BLOG域名:programb.blog.youkuaiyun.com
06-30 1105
在上面的示例中，图像的原点位置相对于其正常位置向下偏移了50像素，向右偏移了100像素。在HTML5和CSS中，图像的原点位置（或称为基准点）通常是指图像在其容器（如。这些值定义了图像在水平和垂直方向上的起始位置。属性来指定图像的原点位置。例如，可以将图像的定位方式设置为相对定位（以上是关于HTML5中图像原点位置的介绍。属性来设置，该属性决定了背景图像（由。属性来指定图像的原点位置。属性来控制图像的定位方式，以及。属性的值，可以实现相同的效果。属性定义）在其容器中的位置。属性来调整图像的原点位置。
ul的默认边距问题/body默认边距的问题
08-23 1010
（1） FF下，ul的有默认的内左边距，padding-left:40px（留给列表符号的位置），还有默认的margin-top:16px，所以能去掉最好去掉。 （2） 而ie下，ul没有默认的内边距，只有默认的margin，而且上下左右都有，上下是15px，左右是10px
内外嵌套div的边距重叠（加border或者随意padding就能解决）
09-13 827
以前关于上下margin的重叠，不叠加取其中较大的一个，主要是并列的，并没有包含嵌套关系。 现在外层div和内层div都设有margin的时候，也会出现叠加取较大一个的现象。 # box { margin:20px;background-color:red; } p { m
上层div进行float，下层div的margin-top问题（全部浮动来解决）
08-23 550
经过测试： （1）IE，比较正常，margin-top多少，就表现出多少距离。 （2）FF下，浮动的元素就好象不存在一样，所以底下的margin-top参照位置是参照浮动元素的上一层或者body。 （3）所以是两个div，其中只有一个浮动，然后它们并列在一起的时候，这个时候
选择padding更好的几种情形（padding最大的好处就是不需预先固定宽度，可扩展性好）
08-23 395
（1） 默认情况下，输入几个文字，div并没定义高宽，这个时候，高度就是16px，因为div是被内容撑起来的，所以高度是默认基准字体的高度。而width是父级的100%，父级body就是整体宽度（默认margin不考虑）。所以如果先设置div的width，然后再设置paddin
两个div进行float后的margin设置
09-13 392
我们都是好孩子   你们都是好孩子   当id=f的div设置float的时候，如果id=s不设置float，则要设置id=s的div的margin-left的时候，就必须至少大于id="f"的width才有效果。 而如果id=s同时设置float的时候，这个时候ma
上面div浮动，下面div消除浮动因素后的margin-top问题，很有意思，看看有没兼容性问题
08-23 382
上面div浮动，下面div消除浮动因素后的margin-top问题，很有意思，看看有没兼容性问题 文字和图排一起的时候，文字上面出现真空，怎么考虑对齐的问题，以及不同浏览器下的排列方式 有宽高的div，先不设宽高，而直接通过调节padding使其具有宽高，还是
em作为字体大小单位
08-03 369
em是相对大小单位，用户调整基础字体大写的时候，也能跟着调整。 常见做法是： body { font-size:62.5% } 因为body的父级是html，而html里的1em=16px，所以body设置完后，会得到1em=10px，这样方便设置。于是以后body里的1e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值