Question

应用此代码，即可看到它。内部盒子的边缘顶部应用于外部。 inBox如何不影响盒子？

library(tidyverse)
mydf %>% 
  mutate(ratings = str_extract_all(records, "(?<=Rating: )[A-E-]+"), 
         date = str_extract_all(records, 
              "(?<=Rating Range: )[A-Z][a-z]{2}-\\d{2}-\\d{4}")) %>% 
  select(-records) %>%
  unnest
#  bank_name ratings        date
#1    Bank A      B- Jun-08-2017
#2    Bank A       B Jan-23-2013
#3    Bank B    BBB- Oct-02-2018
#4    Bank B       B Apr-06-2018
#5    Bank B       A Jun-08-2007
#6    Bank B     CCC Jan-23-2006

Answer 1

您不能在元素内做页边距。您可以使用填充。如果您不希望填充影响框的侧面，请同时设置box-sizing: border-box。

垂直边距具有一些不直观的特征，例如折叠。有一些预防vertical margin collapse的方法可以解决您的问题。

Answer 2

因此，您实际上可以在子元素上使用margin-top。正如其他人所提到的，垂直边距可能会崩溃。这是最不直观的实例之一，其中孩子的margin-top显然正好穿过父母。

您可以通过向父级添加任意数量的填充来解决此问题。我添加了padding-top的1像素，页边距突然表现出了最初的预期效果：

.box {
  width: 400px;
  height: 400px;
  background-color: red;
  padding-top: 1px;
}

.inBox {
  width: 200px;
  height: 200px;
  background-color: white;
  margin-top: 100px;
}

<div class="box">
  <div class="inBox">.inBox has margin-top</div>
</div>

按照其他人的建议，我也可能只在父级上使用padding-top来创建所有空间，但是这种技巧暴露了边距倒塌的有趣细微差别。

我想在盒子里套上边距

2 个答案: