Question

我正在开发一个新项目并且遇到了这样的问题：当我向div标签添加边框时，div会向下移动，以便它不再位于边框内。

div {
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 30px;
  line-height: 50px
}
.gases {
  background-color: limegreen;
}
.blocks {} .border {
  border: 5px solid black;
}

<div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
    <p>H</p>
  </div>
</div>

Answer 1

%s/TTL:"\$\\sqrt{s} = 14\$ TeV"/TTL:"<SIB>, \$\\sqrt{s}\$ = 14 TeV, <LUM> = 300 <IFB>"/g标记上可能会设置margin个p。尝试添加以下CSS行以删除边距。

.border p {margin: 0;}

JSFiddle：https://jsfiddle.net/5w6jt0ru/1/

Answer 2

根据用户代理样式表，element具有默认margin-top和margin-bottom，您需要将其删除。

＆＃13;

div {
   height:50px;
   width:50px; 
   text-align:center;  
   font-size: 30px;
   line-height:50px
}
.gases {
   background-color:limegreen;
}
.border{
   border:5px solid black;
   box-sizing:border-box;
}

.border p{
   margin: 0;
}
<!-- remove p element default margin-top and margin-bottom -->

＆＃13;

<body>
   <div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
     <p>H</p>
  </div>
   </div>
</body>

＆＃13;

Answer 3

.border { display: inline-block}
.blocks {
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  
}
.gases {
  background-color: limegreen;
}
.blocks {} .border {
  border: 5px solid black;
}
p {margin: 0}

<div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
    <p>H</p>
  </div>
</div>

Answer 4

删除p标记（导致额外的边距），将div规则分成两个div的单独规则，并小心使用line-height等内容仅在一个这些元素。这是代码：

＆＃13;

.a {
  height: 50px;
  width: 50px;
}
.b {
  text-align: center;
  font-size: 30px;
  line-height: 50px
}
.gases {
  background-color: limegreen;
}
.border {
  border: 5px solid black;
}

＆＃13;

<div class="a border">
  <div class="b periodOne groupOne gases blocks" id="hydrogen">
    H
  </div>
</div>

＆＃13;

我如何在我的边界内获得我的div标签？

4 个答案: