0

When I ran the code on live server, spaces have been added on the right side of each span elements, though the margins and padding have universally set to "0". How to remove the space?

Why is this happening is not clear.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

span {
  border: 2px solid green;
}
<span>This is a span</span>
<span>This is a span</span>
<span>This is a span</span>
<span>This is a span</span>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Pralay
  • 1
  • 1
  • That is all the whitespace between the `>` of one closing `` tag, and the `<` of the next `` - a first a newline/line break, and then several space characters. HTML condenses all that white space to a single space character when this gets rendered. – CBroe Aug 14 '23 at 11:22
  • [Does this answer your question?](https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space) – Md. Rakibul Islam Aug 14 '23 at 11:43
  • `` is a *contextual* inline-level element (not a block-level one like `h1` `p` `div`...) and therefore that's pretty much like asking why there's a single space between `"foo bar"` - or why does it not renders like *"foobar"*. If you want to stick to SPAN, one easy way is to add `display: flex;` on the SPAN's parent element: https://jsfiddle.net/72c6gd51/ – Roko C. Buljan Aug 14 '23 at 11:45

0 Answers0