Weird whitespace character on the side of tag

Question

I want to create header of website. When I started create it, I notice one weird behavior of text tags (from h1 to p, spans and etc.). It adds that whitespace on the side of image where text is located.

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
        <p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

If you still don't understand what I'm talking about, here is screenshot:

See this blue line? This is that weird whitespace.

UPD 1:

I changed padding-left: 0.5rem; to margin-left: 0.5rem; but whitespace is still here.

UPD2:

Also found a solution thanks to Matt Croak for link. Solution is to add font-size:0 to logo block and set font-size: initial; or font-size: 16px; to header .logo .title.

my guess is that it comes from your `padding-left` style on the `header .logo .title` selector — koolahman, Nov 12 '19 at 19:20
Please provide information about your browser. If possible, reproduce the problem in Browser Stack. It doesn't seems to be a common problem — Maxwell s.c, Nov 12 '19 at 19:31

score 1 · Answer 1 · answered Nov 12 '19 at 19:30

1

Remove the whitespace in your code between the paragraph and image:

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

answered Nov 12 '19 at 19:30

j08691

204,283
31
260
272

Why does it happens? I personally find it a little strange. – PythonNewbie Nov 12 '19 at 19:31
@PythonNewbie The browser renders whitespace in inline elements – j08691 Nov 12 '19 at 19:32
`img`'s are rendered as `display: inline-block;` by default. Items that are `inline-block` behave like words in a sentence and therefore have inherent white space between them. More [here](http://www.codeblocq.com/2016/09/The-mysterious-4px-gap-in-between-images/) – Matt Croak Nov 12 '19 at 19:34

score 1 · Accepted Answer · answered Nov 12 '19 at 19:31

It has to do with your img and your HTML being on on multiple lines. If you put your img and p HTML on the same line (no space between) it goes away. img's are rendered as display: inline-block; by default. Items that are inline-block behave like words in a sentence and therefore have inherent white space between them.

You can read more about it here.

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
        <p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

Peter van Luik · Answer 3 · 2019-11-12T19:39:34.360

-1

Padding seems to be ok.

The so called whitespace is caused by the spaces/newline between the img and the p tag.

If you change your html format like below, the whitespace is gone.

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

edited Nov 12 '19 at 19:39

answered Nov 12 '19 at 19:25

Peter van Luik

107
4

I tried it inside a `` and `` tag and the space is still there. – Matt Croak Nov 12 '19 at 19:27

Weird whitespace character on the side of tag

3 Answers3