關於基本的HTML，div標籤的邊界

我在學習HTML，我不明白爲什麼當我在一個div內有兩行時，第二行不在div的邊界內。關於基本的HTML，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/

來源

2016-02-05 Aharon Snyder

您有固定寬度的標題。 '高度：75px;'刪除它。它會工作。 – ketan

你可以試試這個：

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

來源

2016-02-05 05:57:22

問題是真的，你已經做了造型。更改DIV高度類似大於當前75px

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

     }

來源

2016-02-05 05:57:25

你有一個height屬性在CSS的標題標記設置。

height: 75px;

這限制了<header>的高度，從而邊界。刪除高度屬性，事情將正確。

來源

2016-02-05 05:58:00 Scott

無論何時您使用heading tag那麼這些標籤會根據您的需要使用自己的填充和邊距，因爲它們已經給容器賦予了高度，因此請使用標題標籤。

來源

2016-02-05 05:58:11

親愛的你寫的代碼是正確的，但在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>

來源

2016-02-05 06:09:26

標題標籤（h1...h5）有一些默認的利潤率。

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

來源

2016-02-05 06:19:51 Abhinav

關於基本的HTML，div標籤的邊界

回答

相關問題