Rahmen um Text mit CSS

Question

Ich möchte einen feinen Rahmen um meine Text-Hyperlinks erstellen. Allerdings scheint die Box, die ich erstellt habe, den darunter liegenden Text nach rechts zu schieben. Siehe folgendes Bild:

Dies ist die CSS die ich verwendet habe:

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; 
} 

Ich dachte, es auf den Zeilenabstand beziehen könnte, aber die Box scheint die Höhe der Linie zu folgen Raum.

Jede Hilfe wäre willkommen!

Answer 1

Der Rand befindet sich auf der Außenseite des Elements, wodurch das Element etwas größer als der umgebende Text wird. Der Float: left verursacht das Floaten des Texts, aber unter dem Ende der Box aufgrund des Höhenproblems. Wenn Sie den Float entfernen, wird das Layout korrekt angezeigt. Beachten Sie, dass ich gerade einen langen Textabschnitt erstellt und die Boxklasse in einen Bereich getauscht habe. Sie brauchen nicht einmal die Box-Klasse hinzufügen - Sie könnten alles mit CSS-Selektor-Spezifität tun - in diesem Fall ... p span {...} ... würde die richtigen Elemente anvisieren.

.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

Sie können Ihren Text in einem span-Tag, und das Hinzufügen der folgenden CSS versuchen Verpackung:

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); 
}