关于基本html，div标签的边框
[英]Regarding basic html, borders of the div tag
问题描述
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div. 
我正在学习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>
My css isn't showing in a code block properly so i put a jsfiddle link below. 我的CSS没有正确显示在代码块中，因此我在下面放置了jsfiddle链接。
Thanks for any help. 谢谢你的帮助。 https://jsfiddle.net/xLjsmrfc/ https://jsfiddle.net/xLjsmrfc/
6 个解决方案
解决方案1
3 已采纳 2016-02-05 05:57:22
解决方案2
2 2016-02-05 05:58:00
You have a height property set in the CSS for the header tag. 您在CSS中为header标签设置了height属性。
height: 75px;
This restricts the height of the <header> , and thus the border. 这限制了<header>的高度，从而限制了边框。 Remove the height property and things will correct. 删除height属性，一切都会正确。
解决方案3
1 2016-02-05 06:09:26
Dear you are writing the code right but there is a small flaw in Css. 尊敬的您正在正确地编写代码，但是Css中有一个小缺陷。
Both lines are falling within the Div just height of Div is Creating dilemma for you. 两条线都落在Div内，而Div的高度正在为您创建难题。
I've two methods for you : 我为您提供两种方法：
----------1. ---------- 1。 Altering Your own code ---------- 修改自己的代码 ----------
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. ---------- 2。 Second My Way : ---------- 第二路： ----------
<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
The problem is really with the styling you've done. 问题确实在于您完成的样式。 Change the div height to something like greater than the current 75px 将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
Header tags ( h1...h5 ) have some default margins. 标头标签（ h1...h5 ）具有一些默认边距。
You can add the margin:0px for that and it will work fine. 您可以为此添加margin:0px ，它将正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.