Margin problem with inline-block links

I’m having a margin problem with inline-block links. If I display the anchor tags as regular spans, they look like this:

However, if I make them inline-block, the block is sometimes too large. See the fourth link here, where you see UP24.

Is there a solution to this? Thanks.

Of course there’s a solution. You have given us no code though. There is no possible way to offer a solution because of that.

Give us the inline-block code example.

Sorry. I thought this might be a common problem. Here you go:[code]


Head-to-Head Comparisons:

Garmin Vívofit vs. Garmin Vívosmart
LG G Watch vs. Samsung Gear 2
Fitbit One vs. Fitbit Zip
Garmin Vívofit vs. Garmin Vívosmart
Motorola Moto 360 vs. Samsung Gear S
Apple Watch vs. Samsung Gear Live
Apple Watch vs. LG G Watch
Fitbit Zip vs. Misfit Shine
LG G Watch R vs. Motorola Moto 360
Basis Peak vs. Samsung Gear S

[/code][code] /* Comparison and feature pages */ .popComparisons a, .headToHeads a, .specPages a { display: inline-block; padding: 3px 6px; text-decoration: none; margin: 2px 0 2px 0; border-radius: 2px; color: #FFF; font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; font-size: 110%; } .popComparisons a, .headToHeads a { background-color: #9651B8; border: 1px solid #9651B8; } .popComparisons a:hover, .headToHeads a:hover { background-color: #AB74C6; border-color: #AB74C6; text-decoration: none; } [/code]

So you’re questioning the fact taht the text is dropping onto a second line? There just isn’t enough room for all of that text on one line. I put yoru code into jsfiddle and no drop occurs (I do have a big monitor.)

There’s nothing bad about your code other than you probably not giving enough room, and in which case, the drop is normal.

It’s somewhat common but everybodys code is different. We don’t know how you have your HTML and CSS set up. Always always always give us code. Not everyone codes the same.

Er, no, the problem isn’t that it drops to the second line. The problem is that when it does, the rest of the second line is turned into one big block, and the subsequent link gets pushed onto the third line. Notice that this does not happen in the first example, above.

I don’t see that on my end. Could you give us the span example now? The only issue you have there is just the line height it appears so that might be easier to work out / that should be something I can reproduce on my end.

To get the effect I think you’re seeking leave them in display: inline mode and then adjust the line-height: property to increase the spacing between lines. Start with a value of 2 and move it up or down.

BTW, Inline elements do not have margins (inline-block elements do). Setting the margin property of a display: inline element does nothing - the browser ignores it as it is an invalid property for that display type. (Unless it’s IE 7 or earlier, which treats display: inline the way other browsers treat display: inline-block).

Not entirely correct. For vertical margins, you are right in the aspect of browsers not implementing the vertical margin. Horizontal, not so much.

Also IE7 only does that behaviro when it has hasLayout

Horizontal margins on inline (or inline-block) elements are somewhat unreliable since white space affects it. Unreliable to the point of being unusable in my opinion.

I’m not going to debate you on that point; my only agenda was to not confuse potential learners into learning what you said about the margin property doing nothing on inline elements. Seemed a bit misleading. Carry on :slight_smile: !

I understand. It’s easy to forget the nuance on elements of programming languages one intentionally avoids for whatever reason, or have become foggy with the passing of the years (I’d forgotten the hasLayout detail of IE 7’s behavior).

There are various methods for getting the look you want, nicely summarised here: http://css-tricks.com/multi-line-padded-text/

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

a {
	display: inline-block;
	padding: 3px 6px;
	text-decoration: none;
	margin: 2px 0 2px 0;
	border-radius: 2px;
	color: #FFF;
	font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
	font-size: 110%;
	line-height: 1.5;

}

a b {
	font-weight: normal;
	background:#9651B8;
 	-webkit-box-shadow: 0 0 0 0.3em #9651B8;
	-moz-box-shadow: 0 0 0 0.3em #9651B8;
	box-shadow: 0 0 0 0.3em #9651B8;
}

b:hover {
	background: #AB74C6;
	-webkit-box-shadow: 0 0 0 0.3em #AB74C6;
	-moz-box-shadow: 0 0 0 0.3em #AB74C6;
	box-shadow: 0 0 0 0.3em #AB74C6;
}

</style>
</head>
<body>

<div>
	<span>Head-to-Head Comparisons:</span><br>
	<a href="#" sl-processed="1"><b>Garmin Vívofit vs. Garmin Vívosmart</b></a>
	<a href="#"><b>LG G&nbsp;Watch vs. Samsung Gear&nbsp;2</b></a>
	<a href="#"><b>Fitbit One vs. Fitbit Zip</b></a>
	<a href="#"><b>Garmin Vívofit vs. Garmin Vívosmart</b></a>
	<a href="#"><b>Motorola Moto&nbsp;360 vs. Samsung Gear&nbsp;S</b></a>
	<a href="#"><b>Apple Watch vs. Samsung Gear&nbsp;Live</b></a>
	<a href="#"><b>Apple Watch vs. LG G&nbsp;Watch</b></a>
	<a href="#"><b>Fitbit Zip vs. Misfit Shine</b></a>
	<a href="#"><b>LG G&nbsp;Watch&nbsp;R vs. Motorola Moto&nbsp;360</b></a>
	<a href="#"><b>Basis Peak vs. Samsung Gear&nbsp;S</b></a>
</div>

</body>
</html>

Line-height + nonbreaking spaces worked well. Thanks, everyone! (There’s a minor issue that the last few letters are moved to the next line if there isn’t enough space, but I’m not sure there’s a good solution to that. If anyone knows how to force the break at the beginning of the word rather than at the letter, that would be helpful.)

Ralphs example doesn’t seem to do that?

Based off that, we don’t seem to be working with the same code.

I was given two suggestions, and I was using the first. I’ll try this second one. Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.