1

I have been trying to do something and just realized that there is a space under the span element for no reason. It is easy to remove the space so I am not asking how to remove it. I searched google but couldn't find any reason.

Can you please tell me which CSS property causes this or any other reason?

Here is also a codepen link: https://codepen.io/kavramkurdu/pen/qBWzaEQ

The following example shows the space what I exactly search for:

here is a screenshot:

screenshot-space-below-span-element

* {
  margin: 0;
  padding: 0;
}

div {
  height: 10px;
  background-color: red;
}

span,
a {
  background-color: green;
}
<div></div>
<span>span element (gy)</span>
<div></div>
<a href="">anchor element (gy)</a>
<div></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Muhammed
  • 96
  • 3
  • 8
  • 1
    I see no space anywhere, but whenever you mix inline and block elements like that, you're going to invite odd behaviors. Better to wrap your inline elements in block elements. – Heretic Monkey Sep 30 '19 at 17:32
  • if you reset you inline boxes into inline-block boxes, then the gap goes the boxes have a formatting context (roughly :it can be sized) and bg-color is drawn instead only highlighting the text. If you have any doubt or d noyt understand: 1) select your text : all the green is gone - 2) reset display:inline-block to a and span, select the text .. not all the green goes and is exactly the size of your gap when inline : codepen to test selecting text with box setting inline/inline-block – G-Cyrillus Sep 30 '19 at 17:36
  • Heretic Monkey, if you please look a little closer you can see there is some white space at the bottom of inline elements ( a and span ) right before div elements. – Muhammed Sep 30 '19 at 17:41
  • 1
    https://codepen.io/gc-nomade/pen/oNvrYJw here is the codepen, highlighting text / formatting context are the two keywords. – G-Cyrillus Sep 30 '19 at 17:42
  • @Muhammed https://i.stack.imgur.com/auZPS.png I see no gap in there. I looked as close as I could. – Heretic Monkey Sep 30 '19 at 18:56
  • I added a more approriate duplicate – Temani Afif Sep 30 '19 at 19:17
  • @Heretic Monkey , I have just added a screenshot. – Muhammed Sep 30 '19 at 19:18
  • also added another one not directly related but to get more details about line-height, content-area, etc – Temani Afif Sep 30 '19 at 19:22
  • @Muhammed So obviously we're using different browsers; perhaps it would be a good idea to mention which browser you're using. – Heretic Monkey Sep 30 '19 at 19:28
  • 1
    @HereticMonkey all depend on the default font (set by the browser), this space is closely related to the content area and its calculation is based on the font properties and it may or may not exist for some users – Temani Afif Sep 30 '19 at 19:30
  • 1
    @HereticMonkey also about *but whenever you mix inline and block elements like that, you're going to invite odd behaviors* --> there will be no odd behavior because when doing such mix the inline elements will first get enclosed within anonymous block element and such behavior is pretty well defined in the Spec: https://stackoverflow.com/a/54627511/8620333 – Temani Afif Sep 30 '19 at 21:36

0 Answers0