0

I have this HTML:

<div style="border:1.00px solid #000000;display:inline;">
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

I want to apply a border to cover the text only. The border do not cover the full height of the span. What is the reason?

Edit:

<div>
<div style="border:1.00px solid #000000;display:inline-block;">
<span style="font-family:Arial;font-size:20pt;">this is some text this is some text this is some this is some text</span>
</div>
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

I changed "inline" to "inline-block". In that case a line spanning more than one line and having border not really only covers the text. What I am trying is, if only some part of the whole text has border. The border cover's the whole line. Is this normal or I can something for this ?

I was expecting this output when using inline-block.

nav
  • 25
  • 8

7 Answers7

2
Use "display: inline-block;" instead of 'display:inline'.
Domain
  • 11,562
  • 3
  • 23
  • 44
0

Try adding padding 

<div style="border:2.00px solid #000000;display:inline-block; padding:4px ">
    <span style="font-family:Arial;font-size:20pt;">this is some text</span>
    </div>

Jsfiddle example: https://jsfiddle.net/o9e2nktx/

Edit:

The problem that you are currently having is you haven't added the second span tag inside to the current <div>, so you should have to add that too, to cover the whole text.

JS fiddle: https://jsfiddle.net/q4gy5zun/1/

Else if you want it like your previous example, because your <div style="border:1.00px solid #000000;display:inline-block;padding:4px"> code is valid only for that particular <div> only, which means that you cannot cover the 5th "this is some text" part,which is out of that <div>.So you have to use <br>as follows.

JS fiddle: https://jsfiddle.net/q4gy5zun/2/

AVI
  • 5,516
  • 5
  • 29
  • 38
0

Change the display:inline; to display:inline-block; DEMO

Satej S
  • 2,113
  • 1
  • 16
  • 22
0

Try display:inline-block instead of inline.. Demo

<div style="border:1.00px solid #000000;display:inline-block;">
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>
G.L.P
  • 7,119
  • 5
  • 25
  • 41
0

Change your div display to inline-block

<div style="border:1.00px solid #000000;display:inline-block;">
    <span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

Because Elements with display:inline-block elements are like display:inline elements, but they can have a width and height. So you can use an inline-block element as a block to give border.

See this What is the difference between display: inline and display: inline-block?

Community
  • 1
  • 1
civam
  • 106
  • 2
  • 9
  • I edited my question after adding "inline-block". Now I have a different problem that the border covers the whole line and not covers only the text part. – nav Feb 29 '16 at 07:11
  • @nav then check out my answer – AVI Feb 29 '16 at 07:18
  • Thanks DoughnutZombie. This is not what I am trying to accomplish. Let me edit my question for more clarity. – nav Feb 29 '16 at 07:38
0

Try removing display:inline,from the div tag.

Arif Burhan
  • 507
  • 4
  • 12
0

You could also add padding to the span, which can be different on different sides, try this and delete whichever border doesn't suit your needs:

<!DOCTYPE html>
<html>
<head></head>
<body>

  <div style="border:1.00px solid #000000;display:inline;">
      <span style="border: 2px solid red;padding: 10px;
         font-family:Arial;font-size:20pt;">this is some text</span>
  </div> 

</body>

Arif Burhan
  • 507
  • 4
  • 12