-4
  <p>
    <span>cancel</span><span>comfirm</span>
  </p>
  <hr>
  <p>
    <span>cancel</span>
    <span>confirm</span>
  </p>

hey should show me the same result. but in the second template, after rendering, there is 'space' between 'cancel' and 'confirm'.

tags are inline elements so the line break will no use.

i can float them both with CSS.

but, i don't know the reason. i just think block tags will have space.

ref img

Cœur
  • 37,241
  • 25
  • 195
  • 267
hui
  • 591
  • 7
  • 22
  • No, they should not show you the same result. Note you do have spaces in the source between the first two spans. – Mr Lister Apr 12 '16 at 07:07
  • Why don't you just put then behind each other: cancelconfirm – s.lenders Apr 12 '16 at 07:07
  • Adding a PLUNKR for ease --> https://plnkr.co/edit/MNbG7KH7cEFvmOGkKflL?p=preview – Satej S Apr 12 '16 at 07:07
  • http://stackoverflow.com/a/2519948/4759033 – Satej S Apr 12 '16 at 07:09
  • 1
    @Cristy well, it's not a duplicate. OP is asking why it happens, he is not asking how to fix it. – Mr. Alien Apr 12 '16 at 07:22
  • @Mr.Alien It is explained in the answers to that question why it is happening: `Newlines are counted as a space in HTML.` and there are also given several solutions to his problem. – XCS Apr 12 '16 at 07:23
  • You don't know the reason because your understanding is completely wrong. If nothing else, you have the whole thing backwards - whitespace is insignificant only between block elements, not inline elements. – BoltClock Apr 12 '16 at 08:39

2 Answers2

0

Note: OP edited his question after it was answer, still, answer is applicable, he just changed the order of DOM hence now his image is correct.

I think your image is incorrect. It should be showing white space in the first p element and not the second one. As span is an inline element, it will result in whitespace being rendered by browsers when you have a line break between inline elements in your source.

You can hack that in several ways by putting those elements in a single line in your source code which you are already doing in your 2nd example, or you can use font-size: 0; on your parent element and re-set font-size for child elements, or you can put an empty comment like this.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Please note that `font-size:0` may not be the right solution everywhere, as there are browsers that do not treat this correctly. Opera 12 for instance used the minimal font size (as set in the user preferences, for instance 8px) whenever you have `font-size:0`. – Mr Lister Apr 12 '16 at 07:16
  • @dukegod Still, answer remains the same – Mr. Alien Apr 12 '16 at 07:18
0

Span is for a group of text that you'd like to apply a similar style to. Span by default has no style applied to it. Span is generally used for styling to specific part of data. Span is not rendered as anything or something on browser.

Renascent
  • 184
  • 1
  • 3
  • 17