關於基本html，div標簽的邊框
[英]Regarding basic html, borders of the div tag
問題描述
我正在學習html，我不明白為什么當我在div內有兩行時第二行不屬於div的邊界。
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
我的CSS沒有正確顯示在代碼塊中，因此我在下面放置了jsfiddle鏈接。
謝謝你的幫助。 https://jsfiddle.net/xLjsmrfc/
6 個解決方案
解決方案1
3 已采納 2016-02-05 05:57:22
您可以嘗試以下一種方法：
增加height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
解決方案2
2 2016-02-05 05:58:00
您在CSS中為header標簽設置了height屬性。
height: 75px;
這限制了<header>的高度，從而限制了邊框。 刪除height屬性，一切都會正確。
解決方案3
1 2016-02-05 06:09:26
尊敬的您正在正確地編寫代碼，但是Css中有一個小缺陷。
兩條線都落在Div內，而Div的高度正在為您創建難題。
我為您提供兩種方法：
---------- 1。 修改自己的代碼 ----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
---------- 2。 第二路： ----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
解決方案4
0 2016-02-05 05:57:25
問題確實在於您完成的樣式。 將div高度更改為大於當前高度的75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
解決方案5
0 2016-02-05 05:58:11
每當您使用heading tag這些標簽都會占用其自己的填充和邊距，因為您已經給容器指定了高度，所以它們會超出邊界，因此請根據需要使用標題標簽。
解決方案6
0 2016-02-05 06:19:51
標頭標簽（ h1...h5 ）具有一些默認邊距。
您可以為此添加margin:0px ，它將正常工作。
CSS中的div標簽和div周圍的內嵌邊框問題
[英]Problems with the div tag in CSS and inline borders that go around the div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.