简介
在前端页面开发中，经常需要修改盒子的边距和填充等属性，这些属性对于页面的布局和样式非常重要。nt-web-margin-padding-editor 是一个提供 UI 界面来修改 margin 和 padding 属性的 npm 包。使用该包可以大幅度减少开发者的开发时间。
安装
要使用 nt-web-margin-padding-editor，需要使用 npm 进行安装，安装命令如下：
npm install nt-web-margin-padding-editor
使用
引入
安装成功后需要在需要使用的文件中引用。
import NtWebMarginPaddingEditor from 'nt-web-margin-padding-editor'
初始化
在引用成功后需要进行初始化，传递必要的参数：
const marginPaddingEditor = new NtWebMarginPaddingEditor({
targets: '.box',
showType: 'border-box'
})初始化时需要传递以下参数：
targets
targets 参数指定需要修改 margin 和 padding 属性的元素，可以是一个选择器，也可以是一个 HTMLElement 数组。
showType
showType 参数指定 margin 和 padding 的展示方式，有两种可供选择：'border-box' 和 'content-box'。默认为 border-box，表示展示的是 border-box 的情况，content-box 表示展示的是 content-box 的情况。
获取结果
在修改完毕后，需要通过 marginPaddingEditor 对象的 getResult 方法，获取当前修改的结果：
const result = marginPaddingEditor.getResult() console.log(result)
效果展示
下面是使用 nt-web-margin-padding-editor 修改盒子样式的示例代码：
-- -------------------- ---- -------
---- ------------------------
--------
------ ------------------------ ---- ------------------------------
----- ------------------- - --- --------------------------
-------- -------
--------- ------------
--
-------------------------------
---------使用浏览器打开该页面，可以看到页面上有一个盒子，通过点击 nt-web-margin-padding-editor 提供的界面，可以修改盒子的 margin 和 padding 属性。修改完成后，可以调用 marginPaddingEditor.getResult 方法获取修改的结果。
指导意义
nt-web-margin-padding-editor 使用简便，对于一些单纯的盒子样式修改加快了开发速度。但是，对于涉及到较复杂的样式问题时，该包并不能完全解决问题。在开发过程中需要合理使用该包，同时也需要学会手动编写 CSS 代码，以便于应对更加复杂的开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66c77