跨邊界顯示怪異

Question

我做了我的第一個網站頁面，它看起來像這樣：

要做到這一點很好的標題和紅色border圍繞我使用下面的代碼：

div { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    padding-top: 25%; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
div span { 
 
    border: 2px solid rgba(250, 0, 0, 0.75); 
 
    padding: 5px; 
 
} 
 
div h1 { 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    font-size: 4rem; 
 
}

<div> 
 
    <h1><span>This is a title</span></h1> 
 
</div>

但是，當我有一個更長的標題，border顯示很奇怪，像這樣：

在這種情況下，我會怎樣的風格，標題，以獲得唯一一個border所有文字，就像在第一張照片？

Answer 1

從span添加border到h1，而不是將其取出，並設置display:inline-block到h1

div{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    padding-top: 25%; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: black; 
 
    text-align: center; 
 
} 
 
div h1 { 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    font-size: 4rem; 
 
    /* add this*/ 
 
    border: 2px solid rgba(250, 0, 0, 0.75); 
 
    padding: 5px; 
 
    display:inline-block 
 
}

<div> 
 
    <h1><span>This is a title</span></h1> 
 
</div>

---

或如我前面提到的（但你確實說過不工作你） - 見revision

加display:inline-block到span因爲跨度是一個內聯元素

div span { 
 
    border: 2px solid rgba(250, 0, 0, 0.75); 
 
    padding: 5px; 
 
    display:inline-block 
 
} 
 
div h1 { 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    font-size: 4rem; 
 
}

<div> 
 
    <h1><span>This is a title</span></h1> 
 
</div>

Answer 2

您需要更改span的display屬性爲inline-block：

div span{ 
    border:2px solid rgba(250,0,0,.75); 
    display:inline-block; 
    padding:5px; 
}