---
title: IntersectionObserver.rootMargin
slug: Web/API/IntersectionObserver/rootMargin
translation_of: Web/API/IntersectionObserver/rootMargin
---
<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>

<p>{{domxref("IntersectionObserver")}} 接口的只读属性<strong><code>rootMargin</code></strong>是与CSS属性{{cssxref("margin")}}语法相似的字符串(string)对象. 在交叉检测开始之前，由<code>rootMargin规定的矩形的每一边都会被添加至</code>{{domxref("IntersectionObserver.root", "root")}}元素的边框盒({{Glossary("bounding box")}})的相应边。例如，这可以让你向外调整边界，使得目标元素被认为是100%可见的，即使此元素得一部分长或宽被裁剪，或者在边缘过于靠近根边框盒边界的情况下，将目标视为部分隐藏。</p>

<p>可参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解root margin的工作原理或如何使其与根的边框盒进行协同工作。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin;
</pre>

<h3 id="值">值</h3>

<p>一个字符串, 形式与CSS {{cssxref("margin")}}属性相似，包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。</p>

<p>这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。</p>

<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">如果</font>rootMargin在对象初始化的时候未被指定，它将被设置成默认值</code><code>"0px 0px 0px 0px"，这将意味着在原根节点边界框与目标边界之间计算交叉值。</code>  {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了rootMargin的更加深入的使用方法。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
   <td>{{Spec2('IntersectionObserver')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<div>
<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
</div>