initial commit

1 files changed, 48 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html
new file mode 100644
index 0000000000..dc5c913927
--- /dev/null
+++ b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html
@@ -0,0 +1,48 @@
+---
+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 class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+</div>