• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2636
  • Last Modified:

how to default line space for br tag

I have mulitple lines texts. And I have to use <br /> to seperate the lines. for example

first line                                                    html first line <br /> second line
second line

How could I modify the first and second line space? so that I could get following lines:
first line                                                 Same html as above.

second line

CSS is prefered.
0
JianJunShen
Asked:
JianJunShen
3 Solutions
 
Ali KayahanFull Stack DeveloperCommented:
have a look at ;
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
0
 
SteeleRBGCommented:
try adding in the css:

br {
   padding-bottom: 20px;
}
0
 
JianJunShenAuthor Commented:

The title should be how to change the default line space specific br tag. Both of mentioned above does not work.

My codes are as follows: Notice I onll need to change specific  br's default line space.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
    .paddingTop{padding-top:0.3cm;padding-bottom:0.3cm}
               p.small{line-length=90%}
      br{padding-bottom: 50px}
      .test{float:left;display:block}
      label{float:left; display:block;width:400px;}
      .testclass{float:left; display:block;width:400px;}
</style>
 
</head>
 
<body>
 
<form >
    <p class="small">
      Some heading<br/>
      
      <div class="paddingTop">
                 <div class=test><input type="checkbox" /></div><div class="testclass">Yes Please,  and not go </div><br/><br/> <!-- this two br's space should be smaller  -->
      <div class=test><input type="checkbox" /></div><div class="testclass">Text here should be ok to go onto two lines and not go under the text box</div><br/></br>
      </div>
      </p>
      some text
</form>
                                    
</body>
</html>
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
JianJunShenAuthor Commented:
I finally solve by myself. I will not give you any points. Since your answer is wrong.


<html>
<head>
<title></title>
<style type="text/css">
    div.padding{padding-top:0.5cm;padding-bottom:0.5cm}
    br.small{line-height: 15px}
      .test{float:left;display:block}
      .testclass{float:left; display:block;width:400px;}
</style>
 
</head>
 
<body>
 
<form >
   
    Some heading
      <div class="padding">      
    <div class=test><input type="checkbox" /></div><div class="testclass">Yes Please,  and not go </div><br class="small"/><br class="small"/>
      <div class=test><input type="checkbox" /></div><div class="testclass">Text here should be ok to go onto two lines and not go under the text box</div><br class="small"/><br class="small"/>
    </div>
      some text
</form>
                                    
</body>
</html>
0
 
Eternal_StudentCommented:
Here is some code that uses less code and is more accessible [allowing users to click the label to select the box, not to mention speaking browsers support]. Also it is a little more semantically correct.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
    div.padding{padding-top:0.5cm;padding-bottom:0.5cm}
		input{float:left; clear:left}
		label{float:left; margin-bottom:20px;}
</style>
 
</head>
 
<body>
 
<form action="">
   
    Some heading
      <div class="padding">      
    		<input type="checkbox" id="one" /><label for="one">Yes Please,  and not go</label>
      	<input type="checkbox" id="two" /><label for="two">Text here should be ok to go onto two lines and not go under the<br /> text box</label>
    	</div>
			<br style=" clear:both" />
      some text
</form>
                                    
</body>
</html>

Open in new window

0
 
Eternal_StudentCommented:
Actually here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
    div.padding{padding-top:0.5cm;padding-bottom:0.5cm}
		input{float:left;}
		label{float:left; margin-bottom:20px;}
</style>
 
</head>
 
<body>
 
<form action="">
   
    Some heading
      <div class="padding">      
				<input type="checkbox" id="one" /><label for="one">Yes Please,  and not go</label><br style="clear:left" />
      	<input type="checkbox" id="two" /><label for="two">Text here should be ok to go onto two lines and not go under the<br /> text box</label>
    	</div>
			<br style=" clear:both" />
      some text
</form>
                                    
</body>
</html>

Open in new window

0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now