Horizontal Space between links in HTML/CSS
css, html
Solution
a.navigation-link {
padding: 0px 10px;
word-wrap: normal;
display: inline-block;
}
`padding`'s full syntax is `top right bottom left`, but there are shorthands, which you can read more about on MDN. I used `top-bottom right-left` in the example above (so `0px` for the top and bottom and `10px` for the right and left sides).
Problem
See the following jsfiddle: http://jsfiddle.net/8uFpD/ I want the links "Home" "What We Do" "Who We Are" and "Donate" to have more horizontal space in between them. I can't figure out how to do it, I've tried lots of ways (span, div, etc.) How do I add the horizontal space between them without having to resort to putting a white square image? (That seems tacky to me.) HTML: ``` <body> <div class="wrapper"> <div class="whiteTitleBar"> <span class="title">My Website</span> <span class="navigation"> <a class="navigation" href="index.html"> Home</a> <span class="navigationSpace"/> <a class="navigation" href="ourwork.html"> What We Do</a> <span class="navigationSpace"/> <a class="navigation" href="about.html"> Who We Are</a> <span class="navigationSpace"/> <a class="navigation" href="donate.html"> Donate</a> </span> </div> <div class="blackHorizontalLine"></div> <div class="redYouAreHereBar">HOME</div> <div class="blackHorizontalLine"></div> <div class="home"> BLAH BLAH BLAH </div> </div> </body> ``` CSS: ``` body { font-family:Arial, Helvetica, sans-serif; margin:0px; background-image:url('images/bg.jpg'); background-repeat:no-repeat; background-size: 100% 100%; } div.wrapper { width:862px; margin-left:auto; margin-right:auto; border:2px solid black; margin-top:20px; margin-bottom:20px; } div.home { background-image:url('images/bg_home.jpg'); background-repeat:no-repeat; height:492px; } div.homeText { position:relative; left:390px; top:400px; font-size:xx-large; color:#ffffff; text-shadow: 2px 2px 3px black; } span.title { color:#000000; float:left; font-size:x-large; } span.navigation { color: #000000; float:right; } span.homeTagline { font-size: x-large; position:relative; left:65px; text-shadow: 2px 2px 3px black; } /* unvisited link */ a.navigation:link { color:#000000; text-decoration:none; } /* unvisited link */ a.navigation:visited { color:#000000; text-decoration:none; } /* mouse over link */ a.navigation:hover { color:#FF0000; text-decoration:none; } /* mouse over link */ a.navigation:active { color:#FF0000; text-decoration:none; } h1.white { color:#ffffff; } div.whiteTitleBar { background-color:#ffffff; height:50px; padding:10px; text-shadow: 1px 1px 5px #909090; } div.redYouAreHereBar { background-color:#ff0000; height:50px; padding:10px; font-size:xx-large; color: #ffffff; text-shadow: 2px 2px 5px black; } div.white { background-color:#ffffff; } div.red { background-color:#ff0000; } div.teal { background-color: #008080; } div.lightGray { background-color: #D1D0CE; } div.grayTransparent { background-color: #837E7C; opacity:0.2; filter:alpha(opacity=20); /* For IE8 and earlier */ } div.darkGray { background-color: #404040; } div.whiteTransparent { background-color: #ffffff; opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */ } div.blackBorder { border:2px solid black; } div.blackHorizontalLine { border-bottom:2px solid black; } ``` Solution that worked for me I added this to the css ``` span.navigationSpace { padding-left: 50px; } ``` and I also tested this, and it also worked (as an alternative solution): ``` span.navigationSpace { margin-left: 50px; } ``` I thought I tried these already, but maybe I just needed to delete my cache for the changes to show up and I somehow missed it? I selected Roy's answer because it led me to try this out. I liked this solution better than the other answer because it separates the text style from the layout style, more modularly. (And another answer had a margin on the far right side which I preferred to not have.)