Question

如何让底部边框正好位于文本框下方？

div {
  border-bottom: solid 2px #354458;
}
p {
  color: #ffffff;
  background-color: #354458;
  text-align: center;
  padding: 8px 10px 5px 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  width: 190px;
  font-family: 'Courier New', courier, monospace
}

<div>
  <p>How do I remove the margin below here?</p>
</div>

Answer 1

默认情况下，

p标记会有一些边距。将其设为零，使边框粘到底部。

添加了margin-bottom:0px;

div {
  border-bottom: solid 2px #354458;
}
p {
  color: #ffffff;
  background-color: #354458;
  text-align: center;
  padding: 8px 10px 5px 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  width: 190px;
  font-family: 'Courier New', courier, monospace;
  margin-bottom:0px;
}

<div>
  <p>Margin from below this has been removed!!</p>
</div>

Answer 2

您必须删除浏览器的p标记的默认边距（在我的情况下为

）

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

设置margin-bottom: 0;或仅通过将其设置为0来删除所有边距。

为了获得更一致的跨浏览器布局，您应该考虑使用CSS重置解决方案，例如this one或normalize.css。

p {
  color: #ffffff;
  background-color: #354458;
  text-align: center;
  padding: 8px 10px 5px 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  width: 190px;
  font-family: 'Courier New', courier, monospace;
  margin-bottom: 0;
}
div {
  border-bottom: solid 2px #354458
}

<div>
  <p>How do remove the margin below here?</p>
</div>

文本框下方的HTML边框

2 个答案: