Border Around Text Using CSS

Question

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:

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!

The screen shot seems to be like fine! What's the problem?

SaidbakR
– SaidbakR

2016-09-24 23:51:21 +00:00
Commented Sep 24, 2016 at 23:51 — SaidbakR
– SaidbakR, Commented Sep 24, 2016 at 23:51
can you post the html too?

mlegg
– mlegg

2016-09-24 23:55:31 +00:00
Commented Sep 24, 2016 at 23:55 — mlegg
– mlegg, Commented Sep 24, 2016 at 23:55

gavgrif · Accepted Answer · 2016-09-25 09:14:24Z

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>

Daniel Post · Accepted Answer · 2016-09-24 23:59:28Z

0

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

answered Sep 24, 2016 at 23:59

Daniel Post

1017 bronze badges

Collectives™ on Stack Overflow

Border Around Text Using CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related