blocks|key|3534857|text|边距描述方框和相邻方框之间的间距。相对定位的框(即正常流程的一部分)将在它们之间保持足够的空间，以满足每个框的“边际”要求(称为“边际折叠”)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3534858|另一方面，top和left是位置属性，它们指定盒子的位置；对于绝对定位的盒子，其值是相对于最近的绝对定位的包含盒子。top/left/bottom/right属性指定框的各个边的位置，包括边距。|offset|length|style|CODE|3534859|简而言之，这两者是完全不同的概念。对于正常流动的长方体，应该使用margin来控制相邻长方体之间的间距。|3534860|entityMap^0|0|5|3|9|4|0|W|6|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

Margin describes the space between your box and adjacent boxes. Boxes that are positioned relatively (i.e. that are part of the normal flow) will keep the sufficient space between them that each one's "margin" requirements are met (called "margin collapsing").

<code>top</code> and <code>left</code> on the other hand are positional attributes that specify where your box is located; for absolutely positioned boxes the values are taken relative to the nearest containing box which is itself absolutely positioned. The top/left/bottom/right attributes specify the location of the respective edge of your box including its margin.

In short, the two are entirely different concepts. For normally flowed boxes you should use <code>margin</code> to control the spacing between neighbouring boxes.

blocks|key|3534880|text|好吧，主要的区别是绝对定位的元素被从内容流中拉出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3534881|但是对于相对定位的元素，周围的内容可能会变得模糊。|3534882|另一方面，边距被添加到元素的大小，而周围的内容相应地流动。|3534883|请参阅有一些不同之处的this+sample+fiddle。|offset|length|3534884|当然，在某些情况下，两者都会产生相同的结果，但在正常情况下，这两种方法不能简单地互换或比较。|3534885|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/NGLN/qbryN/^0|0|0|0|B|I|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$H|X|I|Y|1|Z]]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

Well, the main difference is that absolutely positioned elements are pulled out of the content flow.

But also with relatively positioned elements, the surrounding content may become obfuscated.

Margins on the other hand are added to the element's size while the surrounding content flows accordingly.

See <a href="http://jsfiddle.net/NGLN/qbryN/" rel="noreferrer">this sample fiddle</a> with some differences.

Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.

blocks|key|1277639|text|A存在语义上的差异。像top这样的盒子偏移量指定了盒子的边缘(下图中的虚线边缘)与参考边缘的偏移距离(对于绝对定位的元素，这是盒子包含块的顶端边缘)。边距属性(如margin-top+)指定框的边距区域的宽度(下图中虚线边缘和实心边缘之间的距离TM+)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1277640|​|1277641|📷|atomic|1277642|1277643|B+top和left仅适用于定位的元素(+position设置为static以外的任何值的元素)，而margin-top和margin-left适用于除表格显示类型不是表格标题、表格和内联表格之外的所有元素。|1277644|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7bdf26b9e3823b0afe5122b07a7fe487.png|imageAlt^0|0|1|B|3|29|A|3E|2|0|0|0|1|0|0|0|0|1|2|3|6|4|L|8|W|6|1E|A|1P|B|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|D]|$9|12|A|13|B|D]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|16|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|17|8|@]|E|@$9|18|A|19|1|1A]]|F|$]]|$1|L|3|H|5|6|7|1B|8|@]|E|@]|F|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|D]|$9|1H|A|1I|B|D]|$9|1J|A|1K|B|D]|$9|1L|A|1M|B|D]|$9|1N|A|1O|B|D]|$9|1P|A|1Q|B|D]]|E|@]|F|$]]|$1|O|3|-4|5|6|7|1R|8|@]|E|@]|F|$]]]|P|$Q|$5|R|S|T|F|$U|V|W|-4]]]]

A There's a semantic difference. Box offsets like <code>top</code> specify how far a box's margin edge (dotted edges in the image below) is offset from a reference edge (For absolutely positioned elements, that's the top edge of the box's containing block). Margin properties like <code>margin-top</code> specify the width of the margin area of a box (The distance <code>TM</code> between the dotted edge and and solid edge in the image below).

<img src="https://i.stack.imgur.com/T0Bb3.png" alt="Box model">

B <code>top</code> and <code>left</code> apply only to positioned elements (elements with <code>position</code> set to anything other than <code>static</code>) while <code>margin-top</code> and <code>margin-left</code> apply to all elements except elements with table display types other than table-caption, table and inline-table.

What is the difference between using top and left properties and top and left margins?

I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.

ex:

<pre><code>position:absolute;
top:5px;
left:5px;
</code></pre>

-vs-

<pre><code>margin-top:5px;
margin-left:5px;
</code></pre>

Top & Left vs margin-top & margin-left

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

使用top和left属性以及top和left边距有什么区别？我知道top和left通常用在position:absolute situation中，但我还是想知道有没有什么主要的区别。例如：position:absolute;top:5px;left:5px;-vs-margin-top:5px;margin-left...

问顶部和左侧与边距-顶部和边距-左侧
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顶部和左侧与边距-顶部和边距-左侧EN