文本框下方的HTML边框

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或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>