我正在尝试用 HTML 和 CSS 制作一个如下所示的框：我有以下代码：订单.html：<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title>Orders Page</title> <link rel="stylesheet" type="text/css" href="orders.css"> </head> <body> <div class="order-container"> <div class="order-header"> <p>ORDER #10980<p> </div> <div class="order-list"> </div> <div class="order-footer"> </div> </div> </body></html>订单.css：.order-container { border-style: solid; height: 400px; width: 400px;}.order-header { text-align: center; background-color: #a9dbde; height: 60px;}我希望蓝色标题与框的顶部对齐。但是，蓝色标题和框顶部之间有一个空白，如下图所示。我不知道如何使标题的顶部与框的顶部对齐。任何见解表示赞赏。
3 回答
明月笑刀无情
TA贡献1828条经验 获得超4个赞
浏览器具有您必须覆盖的默认样式，并且您使用的浏览器正在向p元素添加边距。
我建议您为您的元素使用标头标签之一（更具语义）。
<h1 class="order-header">ORDER #10980<h1>
并删除边距
.order-header {
margin: 0;
...
}
您可以使用font-size调整文本大小并使line-height文本垂直居中（height如果执行此操作，则可以将其删除）。
至尊宝的传说
TA贡献1789条经验 获得超10个赞
HTML 有一些默认值，你也可以尝试CSS中的flex属性，它在做一些元素对齐操作时会有很大帮助。
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
四季花海
TA贡献1811条经验 获得超5个赞
删除标签的默认边距p。这是默认值的列表。
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
- 3 回答
- 0 关注
- 91 浏览
添加回答
举报
0/150
提交
取消