how to remove whitespace in css from title

Question

i am trying to place a title above some words but my title has a white space underneath, my css is

.title{
  grid-template-areas:"image" "title"
}

.title_word{
   grid-area: title;
}

.title_img{
  grid-area: img;
}

<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>

as you can see, this works but in firefox and chrome it is giving me lots of white space

score 0 · Answer 1 · edited Jun 27 '21 at 12:22

0

If you want to delete the whitespace underneath add:

margin-bottom: 0;

to your

.title

In the end it should look like this.

.title {
    grid-template-areas:"image" "title"
    margin-bottom: 0;
}

edited Jun 27 '21 at 12:22

Petar Vasilev

4,281
5
40
74

answered Jun 27 '21 at 08:52

Luca Adrian

75
1
7

thank you for your time i have tried all these and they work – Jun 30 '21 at 20:33

score 0 · Answer 2 · answered Jun 27 '21 at 08:58

0

Before I start tinkering with CSS - I add an * selector, which removes default margins and padding.

* {
  margin: 0;
  padding: 0;
}

.title{
  grid-template-areas:"image" "title"
}

.title_word{
   grid-area: title;
}

.title_img{
  grid-area: img;
}

<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>

answered Jun 27 '21 at 08:58

Eduards

1,734
2
12
37

thank you for your time i have tried all these and they work – Jul 01 '21 at 15:21

score 0 · Accepted Answer · answered Jun 27 '21 at 09:04

0

Adding margin-bottom: 0 to the title class will do the job. the reason for that is because margins are used to create space around elements, outside of the defined borders so setting it to 0 will eliminate that extra gap.

the <p> tag has a default css property of margin-block-end: 1em; which is causing that extra gap you see.

.title{
  grid-template-areas:"image" "title"
}

.title_word{
   grid-area: title;
   margin-bottom: 0;
}

.title_img{
  grid-area: img;
}

<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>

answered Jun 27 '21 at 09:04

Ran Turner

14,906
5
47
53

thank you for your time i have tried all these and they work – Jun 30 '21 at 20:33
No problem my friend. I would appreciate the vote up and accept answer if you could please (: – Ran Turner Jul 01 '21 at 05:35
sorry i do not have enough reputation to upvote you but i will acceot your answer – Jul 01 '21 at 15:16

score -1 · Answer 4 · edited Jun 27 '21 at 08:56

-1

This is likely because of the margin that html things tend to have. try a margin: 0; or a margin-bottom: 0; if that doesn't work, try the same with the border: 0; and padding: 0; as that's what makes up the whole block.

edited Jun 27 '21 at 08:56

Dharman

30,962
25
85
135

answered Jun 27 '21 at 08:51

Jimmy Baldwin

49
3

thank you for your time i have tried all these and they work – Jun 30 '21 at 20:33

how to remove whitespace in css from title

4 Answers4