我正在嘗試用 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 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消