CSS를 사용하여 텍스트 주위에 테두리

Question

내 텍스트 하이퍼 링크 주위에가는 경계선을 만들고 싶습니다. 그러나 내가 만든 상자는 오른쪽 아래에 텍스트를 밀어 넣는 것 같습니다.

이 내가 사용한 CSS입니다 : 나는 그것을 줄 간격과 관련 거라고 생각

div.box {  
    border: solid 1px #333333; 
    padding: 0px 5px 0px 5px; 
    margin: 0px 5px 0px 5px; 
    transition: 0.2s ease; 
    box-sizing: border-box; 
    white-space: nowrap; 
    float:left; 
} 

,하지만 상자가 라인의 높이를 따를 것으로 보인다 다음 이미지보기 공간.

도움이 될 것입니다.

Answer 1

테두리가 요소 바깥쪽에 위치하여 주변 요소보다 약간 더 크게 표시되며 float : left는 텍스트의 떠오름을 높이고 높이 문제로 인해 상자 끝까지 가도록합니다. 플로트를 제거하면 올바르게 레이아웃됩니다. 방금 긴 텍스트 묶음을 만들고 스팬에 상자 클래스를 바꾼 점에 유의하십시오. 추가 할 박스 클래스조차 필요 없습니다. CSS 선택기 특이성 (이 경우 ... p span {...} ...)이 올바른 요소를 대상으로합니다.

.box {  
 
    border: solid 1px #333333; 
 
    padding: 0px 5px 0px 5px; 
 
    margin: 0px 5px 0px 5px; 
 
    transition: 0.2s ease; 
 
    box-sizing: border-box; 
 
    white-space: nowrap; 
 
}

<p>This is a long line of <span class="box">text</span> that will break to two lines and will allow the demonstration of the box around the text within each of the spans. Each <span class="box">span</span> will have a border around the text to show the desired effect.</p>

Answer 2

당신은 span 태그 안에 텍스트를 포장, 다음과 같은 CSS를 추가 시도 할 수는 :

span.box { 
    display: inline-block; 
    -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); 
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); 
}