Tạo ra khoảng trắng quanh text

Đề bài của em yêu cầu là phải làm giống hình nhưng em ko làm ra được khoảng trắng ở quanh chữ HTML Quiz, vậy em phải làm thế nào ạ. Em xin cảm ơn.

Đây là code html của em:

    <article>

    <section id="quiz-name">
      
      <h1 id='hello'>HTML Quiz</h1>  <br> 
</section>

Còn đây là code css:

    #quiz-name h1{
    background-image:url(../starter_pack/images/background.jpg); /*đây là ảnh background */
    background-repeat:no-repeat;
    background-size:cover;
    width:700px;
    height:425px;
}


h1 {
 
    background-color:rgba(255, 255, 255, 0.9);/*Đây là màu viền trắng em muốn điền */
    font-family:Pangolin,'Trebuchet MS',cursive;
    font-size:60px;
    color:black;
    padding:10px;
    max-width:75%;
    text-align:center;
    
    display:flex;
    justify-content: center;
    align-items: center;
}

image

bạn đã làm được 90% rồi
background nên đặt ở thẻ chưa h1 chứ không nên đặt ở trong h1
sau đó nếu chưa work nữa thì background color trắng cho h1

nếu bản thân background đó của h1 thì bạn có padding nhiều hơn thì khoảng padding đó cũng là khoảng background thôi
tưởng tượng trên cái nền (thẻ section) thì bạn đặt vào một tờ giấy trắng có chữ hello

3 Likes

Chỗ padding:10px; trong CSS của h1 thử thành padding:30px; xem sao.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?