CSS에서 테두리 크기를 조정하는 방법은 무엇입니까?

Question

헤더 텍스트의 테두리 크기를 줄이려고 노력하고 있습니다. 나는 현재 border: 10px solid;을 사용하고 있습니다. 여기

내가 무슨의 바이올린입니다 : http://jsfiddle.net/hy8f989x/

HTML :

<div class = "container"> 

    <div class = "banner bounce"> 

     <h1 class="banText">Hello!</h1> 

    </div> 

</div> 

CSS : 당신이 볼 수 있듯이

.banner { 
    font-family: 'Slabo 27px', sans-serif; 
    font-size: 50px; 
    text-align: center; 
    color: #f0f0f0; 
    margin-top: 100px; 
} 

.banText { 
    border: 10px solid; 
    display: inline-block; 
    margin: 0; 
} 

body { 
    background: url("https://s3.amazonaws.com/f.cl.ly/items/3O2o342K3O1C1M2P461x/%201920x1080%20Wallpaper.png"); 
    background-size: 1920px 1080px; 
    background-repeat: no-repeat; 
} 

, 국경 전체 화면 내가 무엇을 가로 질러 뻗어 원하는 것은 테두리의 너비/너비 (두께가 아님)를 줄이고 텍스트와 완벽하게 맞춰야합니다.

Answer 1

.banText하는 display: inline 추가

.banText { 
    border: 10px solid; 
    display: inline; 
}