如何设置临时填充？答案

【问题标题】：How can I set a temporary padding?如何设置临时填充？
【发布时间】：2017-01-11 03:19:26
【问题描述】：

注意：我想我的问题的标题与我真正的问题无关（有点）。

这是我的代码：

.one{
  background-color: gray;
}
.two{
  padding: 20px;
}

<div class = "one">
  <div class = "two">
    <span>something</span>
  </div>
</div>

<br>

<div class = "one">
    <span>something</span>
</div>

我需要管理这两个块的外观如何相同。实际上，div.two 最初是不存在的，稍后会添加。所以我想在添加div.two 时保持 UI 不变。我该怎么做？

总之，我需要同时对两个 div.one 元素具有相同的外观。那可能吗？ （注意我希望他们两个都像第一个）

【问题讨论】：

使用带有填充的临时类，您可以稍后在追加后从元素中删除？
@yuriy636 用纯 CSS 做到这一点是不可能的？看，实际上，我有一个突出显示代码的插件，我的意思是它将一些 CSS 属性设置为包含在 <pre><code> ... 中的任何内容。它还为内容附加了父 div。像这样<pre><code><div class="parent> ..."。 parent 类有一个填充。我想在突出显示之后/之前保持我的代码相同。
你不能只从 div.two 中删除填充并将填充添加到 div.one 吗？然后它们看起来会一样。
@Scott 实际上这样做会解决问题......但div.two 不在我的访问范围内......来自插件。
所以，只需将 css 设置为 padding: 0; for .two. 我错过了什么吗？

标签： javascript jquery html css user-interface

【解决方案1】：

是否可以使用visibility: hidden; 而不是追加一个新的？而不是追加更改为visibility: visible;

.one{
  background-color: gray;
}
.two{
  visibility: hidden;
  padding: 20px;
}

https://jsfiddle.net/Hastig/bx2kwjmw/

您也可以向父元素添加填充...

.one{
  background-color: gray;
  padding: 20px;
}
.two{

}

https://jsfiddle.net/Hastig/bx2kwjmw/1/

编辑，我又在玩这个，发现父 div 上的填充不是解决方案，因为一旦插入文本，高度仍然会因为文本大小而增加。

这是一个新的小提琴，展示了如何将不可见的幻影文本作为占位符放入大小，然后在您使用插件附加内容时将其删除。

这只是一个想法，应该有很多方法来实现它..

https://jsfiddle.net/Hastig/bx2kwjmw/5/

$('.plugin-append-simulator').click(function() {
  var content = '<div class="two">something</div>';
  $('.one').html('').append(content);
});

// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content

.one {
  background-color: gray;
  padding: 20px;
  color: hsla(0, 0%, 0%, 0);
}
.two {
  color: hsla(0, 0%, 0%, 1);
}


/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>

<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>

将填充从父级切换到子级的旧版本..

https://jsfiddle.net/Hastig/bx2kwjmw/6/

【讨论】：

@Martin AJ 我更新了我的答案，因为我看到父级上的填充不是一个好的解决方案。如果你能做到，隐藏的可见性仍然可以。

【解决方案2】：

更改应用填充的位置......

.one{
  background-color: gray;
  padding: 20px;
}
.two{
  padding: 0; /* setting this to 0 should override any previous padding declarations*/
}

【讨论】：