Regarding basic html, borders of the div tag
Question
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>
<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.
Thanks for any help. https://jsfiddle.net/xLjsmrfc/
6 answers
solution1
3 ACCPTED 2016-02-05 05:57:22
you can try this one:
add 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%;
}
solution2
2 2016-02-05 05:58:00
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header> , and thus the border. Remove the height property and things will correct.
solution3
1 2016-02-05 06:09:26
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------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. 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>
solution4
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
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
solution5
0 2016-02-05 05:58:11
每当您使用heading tag这些标签都会占用其自己的填充和边距，因为您已经给容器指定了高度，所以它们会超出边界，因此请根据需要使用标题标签。
solution6
0 2016-02-05 06:19:51
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.