CODEWITHSUNDEEP
csshtml
Peter Penzov
Peter Penzov

Reputation: 1728

Add padding in html

I have this html code which I would like align equally. 

<address class="address">                            
    <span>Support E-mail:&nbsp;</span><a href="#">[email protected]</a>
    <br>
    <br>
    <br>
    <span>Sales E-mail:&nbsp;</span><a href="#">[email protected]</a>                         
</address>

This is the visual result that I get:

enter image description here

How I can place thew second e-mail always under the first?

Upvotes: 0

Views: 128

Answers (5)

AnnieMac
AnnieMac

Reputation: 862

You can resolve this by adding a custom class and fixed width to your span classes. For example:

HTML

<address class="address">                            
  <span class="fixed">Support E-mail:&nbsp;</span><a href="#">[email protected]</a>
   <br>
   <br>
   <br>
  <span class="fixed">Sales E-mail:&nbsp;</span><a href="#">[email protected]</a>                         
</address>

CSS

.fixed {
min-width: 150px;
border: 1px solid red;
display: inline-block;
}

Upvotes: 0

keikoku92
keikoku92

Reputation: 151

I would use a table

<table>
<tr><td>Support E-mail:</td><td>[email protected]@gmail.com</td></tr>
<tr><td>Sales E-mail:</td><td>[email protected]</td></tr>
</table>

Upvotes: 0

Harvey Ball
Harvey Ball

Reputation: 131

.sales, 
.support {
  display: inline-block;
  width: 150px;
}
<address class="address">                            
    <span class="support">Support E-mail:&nbsp;</span><a href="#">[email protected]</a>
    <br>
    <br>
    <br>
    <span class="sales">Sales E-mail:&nbsp;</span><a href="#">[email protected]</a>                         
</address>

That is the easiest way to do it if you can use a fixed width. You can also use percentages for width if you want it to be slightly more responsive. Make sure you don't forget the in-line block as the width won't be rendered otherwise!

Upvotes: 2

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

.service {
  display: inline-block;
  width: 200px;
}
<div class="row">
  <span class="service">
		Support E-mail
	</span>
  <span class="email">
		[email protected]
	</span>
</div>
<div class="row">
  <span class="service">
		Sales E-mail
	</span>
  <span class="email">
		[email protected]
	</span>
</div>

Upvotes: 0

Pete
Pete

Reputation: 58462

you can use the following styles:

.address > span {
  display:inline-block; /* allows you to give a width to the span whilst keeping other inline elements on the same line */
  width: 10em;  /*width you want the span to be */
}
<address class="address">                            
  <span>Support E-mail:&nbsp;</span><a href="#">[email protected]</a>
  <br>
  <br>
  <br>
  <span>Sales E-mail:&nbsp;</span><a href="#">[email protected]</a>                         
</address>

Upvotes: 4

Related Questions