关于基本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.