CODEWITHSUNDEEP
htmlcss
kazinix
kazinix

Reputation: 30103

Spacing elements in HTML

Is there a way to create spaces between elements without using margin and actual spaces?

Markup:

<div><span>A</span><span>B<span><span>C<span></div>

Result:

ABC

The reason, I need to catch click event of the div when the user clicks between the span elements.

I tried using the word-spacing but obviously it wasn't created for that so it won't work.

Upvotes: 0

Views: 109

Answers (9)

ketan
ketan

Reputation: 19341

You can use: 

     span
     { 
       letter-spacing: 10px; 
     }

Instead of word-spacing It will create spaces between elements. like: A B C.

Hope it will help you.

Upvotes: 1

m59
m59

Reputation: 43755

This sounds like it fits your need. The letters are spaced as though there is a character between them, and you can run code only when that space in between is clicked. Perhaps you really do want to avoid margins, but it's hard to say without knowing your reasoning there.

document.querySelector('div').addEventListener('click', function(e) {
  if (e.target === this) {
    console.log('div clicked');
  }
});
span {
  margin: .5em;
}

span:first-child {
  margin-left: 0;
}

span:last-child {
  margin-right: 0;
}
<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Upvotes: 1

Ibrahim Badusha
Ibrahim Badusha

Reputation: 152

<div class="span-btn-group">
<span>A</span>
<span>B</span>
<span>C</span>
</div>

.span-btn-group span
{
 display: inline-block;
 padding: 6px 10px;
 background: green;
 border-radius: 3px;
}

Upvotes: 0

Truth A
Truth A

Reputation: 1

There are some ways spacing can be added to HTML by using <br></br> or tab which syntax look &nbsp;&nbsp;&nbsp;&nbsp; A paragraph syntax can also be useful <p></p>.

Upvotes: 0

Xethron
Xethron

Reputation: 1156

You could use padding.

span {
    padding-right: 10px;
}

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

You can try like this: Demo

CSS:

div > span {
    width: 30% !important;
    display:block;
    float:left;
}

HTML:

<div><span>A</span><span>B</span><span>C</span></div>

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

If only the space between the spans is to be clickable, apply the click function to the div, add spaces with &nbsp;, and then prevent propagation on the child spans.

$('#container').click(function() {
  alert('click');
})

$('#container span').click(function(e) {
  e.stopPropagation();
});
#container {
  border: 1px solid #888888;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">&nbsp;&nbsp;&nbsp;<span>A</span>&nbsp;&nbsp;&nbsp;<span>B</span>&nbsp;&nbsp;&nbsp;<span>C</span>&nbsp;</div>

Upvotes: 0

shah sachin
shah sachin

Reputation: 1

If you create spaces between two letter without margin then you can put

padding-right

or

padding-left

I hope it will wok for you

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

How about doing it the other way around?

HTML:

<div>A<span class="spc"></span>B<span class="spc"></span>C<span class="spc"></span>D</div>

CSS:

.spc{padding-left:10px;}

js/jQuery:

$('.spc').click(function(){
    alert('hello');
});

jsFiddle Demo

Upvotes: 0

Related Questions