Question

我正在学习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/

Answer 1

你可以尝试这个：

添加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%;



}

DEMO HERE

Answer 2

您在CSS标记中设置了高度属性。

height: 75px;

这会限制<header>的高度，从而限制边框的高度。删除高度属性，事情就会纠正。

Answer 3

亲爱的，您正在编写正确的代码，但Css中存在一个小缺陷。

这两条线都在Div内，只是Div的高度正在为你创造两难境地。

我有两种方法：

---------- 1。 更改自己的代码 ----------

DispatcherTimer dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Interval = new TimeSpan(0, 10, 0);
dispatcherTimer.Tick += timer_Tick;

private void timer_Tick(object sender, EventArgs e)
{
           //your save db code
}

---------- 2。 第二我的方式： ----------

  body {
      background-color: white;
      border: 5px solid blue;

  }

  header {
      text-align: center;
      height: 155px;
      box-sizing: border-box;
      border: 5px solid blue;
      width: 100%;   
  }

Answer 4

问题在于你所做的造型。将div高度更改为大于当前75px

的高度

header {
    text-align: center;
    height: 105px;
    box-sizing: border-box;
    border: 5px solid blue;
    width: 100%;

        }

Answer 5

每当你使用heading tag时，那些标签都会使用自己的填充和边距，因为你已经给容器增加了高度，所以根据你的需要使用标题标签。

Answer 6

标题标记（h1...h5）有一些默认边距。

您可以为此添加margin:0px，它会正常工作。

关于基本的html，div标签的边框

6 个答案: