Removing Negative Margin


#62

No I’m still saying that inline- block is not the best choice in this situation because of all the implications and behaviours that come with it.

Your question was about the 50px height on the parent div and I just told you why there was a difference when you remove it.


#63

Doing this is good then?
https://jsfiddle.net/u4hpo96m/

position:relative;
left:-4px;

is better
than using this?

margin:-4px

I removed:
font-size:0;

from:

playButtons {
    white-space: nowrap;
  font-size:0;
}

and then added:

 .playButton.soundpark {
    position: relative;
    left: -4px;

  }
  
  .playButton.cavoparadisoclub {
    position: relative;
    left: -8px;

  }

#64

I was referring to this:

  .myLink a {
    vertical-align: top;
  }

is better than:

  .link div {
    margin: 0 0 12px 0;
    height: 50px;
  }

#65

No it’s utter nonsense and is using a magic number (-4px) to kill the white space gap between inline elements and has no guarantee to work in a cross browser way and will depend on the font size, html formatting and browser defaults.

The font size 0 is also a useless approach because many users set a min font size in their browser settings so font size 0 will not kill the white space either.

The effects once again of using the wrong approach for the task in hand


#66

And an alternative would be to use?

On just this specific issue, nothing else.


#67

#68

And an alternative to that please?


#69

Why?

It's been explained to you numerous times why that would be the better approach. Can you provide a valid reason not to use it?


#70

https://www.grandcircus.co/blog/why-ive-stopped-using-float-in-my-css/


#71

And how do those articles/posts relate to your specific code?

Float used to be pretty much the only tool to lay out a page. Then CSS improved, with more options, and it became important to learn which tool was best in which circumstances. Always using float is bad, as is refusing to use it when it is the most appropriate tool.


#72

Can I use this on div blocks?
Will that method work?

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>


#73

What happened when you tried it?


#74

I'm trying it now.


#75

Did I do it wrong?
https://jsfiddle.net/63dgL39w/


#76

Does it look right to you?


#77

It should be horizontal, not vertical.
https://jsfiddle.net/63dgL39w/1/

I can't get this to be horizontal, unless someone else can.


#78

You seem to have misunderstood the "solution" that was being suggested.


#79

vertical-align:top;

Needs to be put somewhere.


#80

Is this better?

If I do it like this I don't need to use a negative.
https://jsfiddle.net/59bgwLou/

  .playButton.soundpark {
    position: relative;
    right: 4px;

  .playButton.cavoparadisoclub {
    position: relative;
    right: 8px;

#81

Same issues as before.

It isn't the negative number which is the problem, it's your whole approach.