CODEWITHSUNDEEP
htmlcss
Guy
Guy

Reputation: 1067

How to make a smaller newline?

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>.

Upvotes: 0

Views: 4856

Answers (2)

user4880283
user4880283

Reputation:

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

#plus{
 //use css properties to play with image
}

Upvotes: 0

lowry0031
lowry0031

Reputation: 190

Use <p> html elements instead of breaks. 

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

EDIT: With CSS:

p {line-height:5px;}

Upvotes: 1

Related Questions