ansaurus

Question

How can I get whitespace between tags to not show up?

Answer 1

+4 A:

You should make the boxes into blocks by changing your CSS for <a> to this:

a {
    border: 1px solid #939393;
    margin: 15px;
    padding: 8px;
    display: block;
    float: left;
}

yjerem 2009-02-06 22:23:20

note that this will make the parent div collapse unless you add overflow:auto to it or a clearing div.

John Sheehan 2009-02-06 22:24:23

Answer 2

+1 A:

No, the spaces between anchors are combined into one and they show up between your anchors since those are all on a "line" together (even though the line spans multiple lines in source). The better way to do this would to be to use a styled unordered list. However, in IE (I think just IE6, but possibly IE7 too), you still get that whitespace with list items.

John Sheehan 2009-02-06 22:23:36

Answer 3

+2 A:

Not ideal, but it works and is better than putting it on one line:

<a href="#">First link</a><!--
--><a href="#">Second link</a><!--
--><a href="#">Third link</a>

Note that I would normally do site nav with list markup to avoid problems like this, but the solution above solves general white space problems.

Robert J. Walker 2009-02-06 22:26:17

Answer 4

+2 A:

I think inline elements (span, em, a) flow text whitespace around them, where block level elements do not (P, h1, div).

To create nav bars I usually wrap the links in list items of an unordered list and give the li float:left which forces display:block and then they usually sit right up against each each other.

Squeegy 2009-02-06 22:26:48

Answer 5

+1 A:

I have had the same problem with lists. The solution I found (and is perfectly valid) was to put the closing bracket right before the start of the next and I guess you can do that with the a element as well:

    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>

jeroen 2009-02-06 22:28:06

Answer 6

A:

 <div class="body">
    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>

    <!--alternate way.-->
    <a href="#" class="">I am by myself</a><
    a href="#" class="collapse-right">We are</a><
    a href="#" class="collapse-left">a pair</a>

</div>

DevelopersDevelopersDevelopers 2009-02-06 22:29:24

Answer 7

A:

Using a span to contain your sets of links would help reduce the need to place class names on the anchors (not cross browser in that hover doesn't work on IE6 but acceptable IMO):-

<html>
<head>
    <style type="text/css">

  span.linkSet { border: 1px solid #939393; margin: 15px; padding: 8px }
  span.linkSet:hover {border-color: #111; }

    </style>
</head>
<body>
    <div class="body">

        <span class="linkSet">
   <a href="#" >This is</a
   ><a href="#" >A group</a
   ><a href="#" >Of Three</a>
  </span>

  <span class="linkSet">
   <a href="#">I am by myself</a>
  </span>

  <span class="linkSet">
         <a href="#" >We are</a
         ><a href="#" >a pair</a>
  </span>

    </div>
</body>
</html>

AnthonyWJones 2009-02-06 22:42:26

ansaurus

tags:

views:

answers:

How can I get whitespace between tags to not show up?

related questions