CODEWITHSUNDEEP
htmlcss
brianfitz
brianfitz

Reputation: 13

Border Around Text Using CSS

I want to create a fine border around my text hyperlinks. However the box I have created seems to be pushing the text underneath it to the right. See the following image:

enter image description here

This is the CSS I have used:

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

I thought it might relate to the line spacing, but the box seems to follow the height of the line space.

Any help would be appreciated!

Upvotes: 1

Views: 117

Answers (2)

gavgrif
gavgrif

Reputation: 15489

The border sits on the outside of the element, making that element slightly larger than the surrounding text, and the float:left causes the floating of the text, but under the end of the box due to the height issue. If you remove the float - it will layout correctly. Note that I just created a long chunk of text and swapped the box class onto a span. You don't even need the box class to be added - you could do it all with CSS selector specificity - in this case ... p span{...} ...would target the correct elements.

.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>

Upvotes: 3

Daniel Post
Daniel Post

Reputation: 101

You can try wrapping your text inside a span tag, and adding the following 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);
}

Upvotes: 0

Related Questions