0

I have been searching all over for a way to make my <br> tag display less whitespace between the two lines it is separating.

I have some text with a text-input and beneath that I want to have an image. The <br> tag makes too large of a gap, but without the <br> tag the image appears on the line with the text. Note that the <br> makes the perfect size gap for the rest of the elements in the div.

 <div>
   ...<!--Some other text and text inputs-->
   <br>Some stuff:&nbsp;<input type="text">
   <br><!--I need this br to be a smaller gap-->
   <img id="plus" src="plus.png" height="30px" width="30px">
 </div>

So my question is how do I make that distance smaller?

The issue

What I've tried

Now I have tried a lot of things! Some of these include editing the br in CSS like 

br {
 display: block;
 margin: 1px 0;
 line-height:1px;
 content: " ";
}

or a combination of those attributes, but no matter which ones I use the minimum height it gets the space down to is the same as the default <br>. It works well for increasing the <br> space, though.src

I tried putting the <br> tag inside of a <div>, but when that <div> is inside my other <div>, it immediately makes a gap that is the same height as a default <br> (even if I don't have a <br> inside my new <div>). Setting the line-height of the new <div> doesn't affect this either.src

<div style="line-height:0px;">
  <br>
</div>

I tried using a <hr> with the visibility: hidden, but that made the gap larger than the <br>.src

I tried many, many, different variations of putting <div>s within <div>s and setting the line-height, but no matter what I get to it ends up not affecting the space between the text-area and the image without messing up everything else in the original <div>.

halfer
  • 19,824
  • 17
  • 99
  • 186
Guy
  • 979
  • 1
  • 11
  • 21
  • 2
    Don't use a br tag. Put your text in span's, div's or p's. You can then properly set the css you're trying to apply. – Steven Stark Dec 12 '17 at 18:51
  • Use `margin/padding` instead. You can't set height etc. to `
    `. The correct one tag is `label` around the text (you can include input into label too).     – pavel Dec 12 '17 at 18:51
  • @StevenStark: better than span/div/p is `label` in this case. – pavel Dec 12 '17 at 18:52
  • @panther How so? labels are for form elements, which are not present. span would be my preference here. – Steven Stark Dec 12 '17 at 18:56
  • @panther Having a single input doesn't justify using a label here. Trying to use a label will apply CSS rules that aren't desired by the OP. It could work, yes, but it's be more work. – Steven Stark Dec 12 '17 at 18:59
  • @StevenStark: Ah, you're right. I saw inputs after both `br`s... my fault. deleted my prev comment – pavel Dec 12 '17 at 19:00
  • Add `* {margin:0;padding:0;box-sizing:border-box}` and go on from there. – VXp Dec 12 '17 at 19:00
  • When I add in a `

    ` or a `

    ` instead of a `
    ` it makes an even larger gap in between the text-area and the image? And I can't mess with the outermost `
    ` because the line spacing is correct for everything else in it, and I use `
    `s earlier in it.
     – Guy Dec 12 '17 at 19:10

2 Answers2

1

Use <p> html elements instead of breaks. 

<p>some stuff</p>    
<p>some other stuff</p>

EDIT: With CSS:

p {line-height:5px;}
lowry0031
  • 180
  • 1
  • 10
  • Why the minus one? – lowry0031 Dec 12 '17 at 19:39
  • Minus for a bad answer? It won't work. You should try it before first. – pavel Dec 12 '17 at 19:53
  • Still not good solution. Try to expand the text into two lines (longer label to input). Forget this task, I won't comment it more. – pavel Dec 13 '17 at 08:40
  • I think because the paragraphs are floating left and are on the right side of the screen (as my div was), when I put the image and the text in two separate paragraphs it creates a large gap in between them. See image (colorized for effect): https://snag.gy/cIBGz5.jpg – Guy Dec 13 '17 at 20:28
0

Remove br tag, here you can do whatever you want to do with image.

#plus{
 //use css properties to play with image
}
  • What can I edit about the image that will make it squish closer to the text above it? – Guy Dec 12 '17 at 23:45
  • #plus{ margin-top:1%; } –  Dec 13 '17 at 08:58
  • Ah, works for increasing the distance between the img and the text, but anything lower than 1% (e.g. 0 or a negative number) just sets the distance to the default amount of space a `
    ` creates.     – Guy Dec 13 '17 at 20:10