Removing Negative Margin

[asasass]

You mean like this?

Edit fiddle - JSFiddle - Code Playground

[asasass]

I think what I’m looking for is a more technical answer as to why one code may be better to use than the other. @PaulOB is good at that.

[Mittineague]

@asasass

You mean like this?

No, not in a jsfiddle either.

I mean something like

http://yourdomain/testfolder/testpage1.html
http://yourdomain/testfolder/testpage2.html
http://yourdomain/testfolder/testpage3.html

so the page HTML and CSS can be looked at and tested without any extra “baggage” added by a site that isn’t part of the page.

[asasass]

Code 1

<style>
  .wrap1 {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial1 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;

  }
  
  .playButton1.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link1 div {
    margin: 0 0 12px 0;
    height: 50px;
  }
  
  .link1 a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .hide,
  .play1 {
    display: none;
  }
  
  .link1 div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="wrap1">
  <div class="myLink1">
    <div class="link1">
      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>

  <div class="playButton1">
    <div class="initial1">Links</div>
    <svg class="pause1" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play1" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div></div>

  <audio id="player1" preload="none">
    <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
    </source>
  </audio>


<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

**Code 2**

<style>
  .wrap2 {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial2 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton2.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link2 div {
    margin: 0 0 12px 0;
    font-size: 0;
    /* Remove whitespace created by inline-block */
  }
  
  .link2 a:first-child {
    margin-left: 0px;
  }
  
  .link2 a {
    width: 50px;
    height: 50px;
    margin: 0px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
    margin-left: 4px;
  }
  
  .hide,
  .play2 {
    display: none;
  }
  
  .link2 div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="wrap2">
  <div class="myLink2">
    <div class="link2">
            <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>

  <div class="playButton2">
    <div class="initial2">Links</div>
    <svg class="pause2" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play2" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div></div>

  <audio id="player2" preload="none">
    <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
    </source>
  </audio>


<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink2").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink2").classList.remove("hide");
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial2").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .play2").style.display = "inline-block";
        document.querySelector(".playButton2 .pause2").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

**Code 3**

<style>
    .wrap3 {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial3 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton3.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link3 div {
    margin: 0 0 12px 0;
  }
  
  .link3 a {
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
 
  }
  
  .preventWrapping {
    white-space: nowrap;
  }
  
  .hide, .play3 {
    display: none;
  }
  
  .link3 div:last-child {
    margin-bottom: 0;
  }
  
  .myLink3 a {
    vertical-align: top;
  }
  
  .play3,
  .pause3 {
    {
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-color: red;
      fill: #aaff00;
    }

</style>



<div class="wrap3">
  <div class="myLink3">
    <div class="link3">


      <div class="preventWrapping ">

              <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
      </div>
    </div>
  </div>



  <div class="playButton3">

    <div class="initial3 ">Links</div>

    <svg class="pause3" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play3 " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div></div>



  <audio id="player3" preload="none">
    <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
    </source>
  </audio>




  <script>
    (function iife() {
      "use strict";
      document.querySelector(".myLink3").classList.add("hide");

      function playButtonClickHandler() {
        document.querySelector(".myLink3").classList.remove("hide");
        var button = document.querySelector(".playButton3");
        var player = document.querySelector("#player3");
        document.querySelector('.playButton3 .initial3').style.display = 'none';
        player.volume = 1.0;
        if (player.paused) {
          button.classList.add("playing");
          document.querySelector(".playButton3 .play3").style.display = "none";
          document.querySelector(".playButton3 .pause3").style.display = "inline-block";
          player.play();
        } else {
          document.querySelector(".playButton3 .play3").style.display = "inline-block";
          document.querySelector(".playButton3 .pause3").style.display = "none";
          player.pause();
        }
      }
      var playButton = document.querySelector(".playButton3");
      playButton.addEventListener("click", playButtonClickHandler);
    }());

  </script>

[asasass]

I’ve already done .html, no difference in the code, they all act the same, unless you’re seeing something I’m not.

[asasass]

Someone just told me this:

Code 1 : set up is better to use.

Because In Code 2: below code is extra so as far coding requirement we don’t want it.

  .link div {
    margin: 0 0 12px 0;
    font-size: 0;
  }

  .link a:first-child {
    margin-left: 0px;
  }

  .link div:last-child {
    margin-bottom: 0;
  }

Because In Code 3: below code is extra so as far coding requirement we don’t want it.

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

  .link div:last-child {
    margin-bottom: 0;
  }
  
  .myLink a {
    vertical-align: top;
  }

[TechnoBear]

@asasass

I’ve already done .html,

And yet the code you’re posting here still looks as if it has been copied from Blogger, with incorrect closing tags and duplicated (and unnecessary) CSS rules.

Perhaps if you were to show you had made some effort to correct and tidy your code before posting here, others might feel more inclined to look at it.

[PaulOB]

@asasass

I think what I’m looking for is a more technical answer as to why one code may be better to use than the other. @PaulOB is good at that.

I gave you my best answer at the top of the page using floats in this case (although flex box for modern browsers would be good also). I also mentioned in another post miles above why the inline-block method is not as robust as it seems.

As with all methods it depends on the exact set up and the answer will change if the details are changed.

I would simplify the whole thing down to this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.links {
	width:266px;
	height:174px;
	overflow:hidden;
	position: relative;
	background: red;
	cursor: pointer;
}
.links a {
	float:left;
	width: 50px;
	height: 50px;
	background: black;
	box-shadow: inset 0 0 0 3px #0059dd;
	margin:0 4px 12px 0;
}
.links a:nth-of-type(5n){margin-right:0}
.initial1{
	height:168px;
	background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
	border: 3px solid #0059dd;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 30px;
	color: #0059dd;
	cursor: pointer;
	line-height: 100px;
	text-align: center;
}
.playButton1.playing {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-color: #000000;
	box-shadow: inset 0 0 0 3px #0059dd;
	fill: #aaff00;
}
.links.hide a,  .play1 {display: none;}
</style>
</head>

<body>
<div class="links"> 
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <div class="playButton1">
    <div class="initial1">Links</div>
    	<svg class="pause1" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    		<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    	</svg> 
		<svg class="play1" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    		<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    	</svg>
    </div>
  </div>
</div>
<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg"> </source>
</audio>


<script>
  (function iife() {
    "use strict";
    document.querySelector(".links").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".links").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

</body>
</html>

That is the answer to this question but may not be the answer to some other question. If you add remove or change things then another method may be required.

[asasass]

Another person said this to me:

I advice you to add rules only if you really need them to avoid unwanted and unexpected behaviours. So,between these options I’d choose Code 1 because the other options contains extra rules that don’t influence visually the behavior of your page.

[asasass]

Can white-space: nowrap; be put inside wrap, or does it need it’s own div tag?

Both work though. I’m asking though, does it make sense to put it in its own div tag or not?

        .wrap {
        position: relative;
        display: table;
        white-space: nowrap;
        background: red;
      }

Edit fiddle - JSFiddle - Code Playground

or like this?

      .preventWrapping {
        white-space: nowrap;
      }

Edit fiddle - JSFiddle - Code Playground

<div class="wrap">
 <div class="preventWrapping">
  <div class="myLink3">
    <div class="link3">
     

        <div>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
        </div>

        <div>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
        </div>

        <div>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
          <a href="#" target="_blank"></a>
        </div>
      </div>
    </div>
 </div>


  <div class="playButton">
    <div class="initial ">Links</div>

    <svg class="pause3" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play3 " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>
</div>

[asasass]

Was just told:

No, why add more markup if you don’t have to?

[ronpat]

@asasass

Was just told:

And what does your noodle think?

[Mittineague]

@asasass , the word “think” applies here.

There comes a time when a web dev can benefit from starting to transition* from what I could call a “research and study” phase to a different phase, “exploration and application of gains”.
* Note that by transition here I mean “in addition to” not “instead of”

The first focuses on learning best practice, historical roots, hard core documentation, etc. Whatever and however widespread and thorough it is, the shift to making decisions can be a calculated risk. The way technology progresses, I think not many can predict the future.

I have found that there often comes a time when I need to either scrap some code or fix it as best as I can. I also like to look at what does not have widespread support, never knowing if it will “catch on” and become a thing, nor do I know how much it’s use will change. Great many of my files have become obsolete over the years.

IMHO, if all three are good to you, pick one, move on. Perhaps you want deeper reassurance? Keep using your browsers dev tools to remove or edit CSS rules “live”. (the file itself does not get changed). I find this way to be helpful to see what rules affect what and how different value affect the look. I have yet to not routinely use dev tools ever-going.

[asasass]

Is this what you mean?

Edit fiddle - JSFiddle - Code Playground

Code 1

<style>
  .wrap1 {
    position: relative;
    display: table;
    white-space: nowrap;
    background: red;
  }
  
  .initial1 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton1.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link1 div {
    margin: 0 0 12px 0;
    height: 50px;
  }
  
  .link1 a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .hide,
  .play1 {
    display: none;
  }
  
  .link1 div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="wrap1">
  <div class="myLink1">
    <div class="link1">

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>


  <div class="playButton1">
    <div class="initial1">Links</div>
    <svg class="pause1" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play1" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>
</div>


<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>


<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink1").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

Code 2

<style>
  .wrap2 {
    position: relative;
    display: table;
    white-space: nowrap;
    background: red;
  }
  
  .initial2 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton2.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link2 div {
    margin: 0 0 12px 0;
    font-size: 0;
  }
  
  .link2 a:first-child {
    margin-left: 0px;
  }
  
  .link2 a {
    width: 50px;
    height: 50px;
    margin: 0px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
    margin-left: 4px;
  }
  
  .hide,
  .play2 {
    display: none;
  }
  
  .link2 div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="wrap2">
  <div class="myLink2">
    <div class="link2">

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>

  <div class="playButton2">
    <div class="initial2">Links</div>
    <svg class="pause2" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play2" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>
</div>

<audio id="player2" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink2").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink2").classList.remove("hide");
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial2").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .play2").style.display = "inline-block";
        document.querySelector(".playButton2 .pause2").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

Code 3

<style>
    .wrap3 {
    position: relative;
    display: table;
    white-space: nowrap;
    background: red;
  }
  
  .initial3 {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton3.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .link3 div {
    margin: 0 0 12px 0;
  }
  
  .link3 a {
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
  }
  
  .hide,
  .play3 {
    display: none;
  }
  
  .link3 div:last-child {
    margin-bottom: 0;
  }
  
  .myLink3 a {
    vertical-align: top;
  }
  
  .play3,
  .pause3 {
    {
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-color: red;
      fill: #aaff00;
    }

</style>

<div class="wrap3">
  <div class="myLink3">
    <div class="link3">

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>

      <div>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
        <a href="#" target="_blank"></a>
      </div>
    </div>
  </div>

  <div class="playButton3">
    <div class="initial3 ">Links</div>

    <svg class="pause3" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="play3 " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>
</div>

<audio id="player3" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink3").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink3").classList.remove("hide");
      var button = document.querySelector(".playButton3");
      var player = document.querySelector("#player3");
      document.querySelector('.playButton3 .initial3').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton3 .play3").style.display = "none";
        document.querySelector(".playButton3 .pause3").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton3 .play3").style.display = "inline-block";
        document.querySelector(".playButton3 .pause3").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton3");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

[PaulOB]

C[quote=“asasass, post:32, topic:281421, full:true”]
Was just told:

No, why add more markup if you don’t have to?
[/quote]

Exactly! Which is why all 3 of your examples are wrong and the one I keep giving you is right. There are issues in all your examples and all rectified in the code I gave you and which you constantly ignore.

If this is a learning exercise then now is the time to learn

[asasass]

@PaulOB

There are issues in all your examples

Really? How so, please explain. I don’t understand how there would be issues with them.

[chrisofarabia]

All you have to do is read the code Paul has provided you with, and compare it to your own. What’s to explain (again)? Who is it who needs to do the learning here?

[asasass]

I want to know what the issues are with the 3 codes I provided.

[TechnoBear]

Putting block div into css

You used inline block and that is automatically placed on the baseline just like text to allow room underneath for descenders. That also means you will get extra horizontal space between blocks just like the space between words. You should have floated the elements and avoided all these issues and all your verbose code as shown in my very first example which is still the correct answer to this layout.

Putting block div into css

It also means that the horizontal space between those elements cannot be guaranteed to be exactly the same between browsers as it will depend on things like font-size word-spacing and browser defaults. The space will also be affected if the tags touch as the white-space will be negated or if a parent has a different font-size of has display of table which kills the white-space in some browsers. However, in most cases the white space is not an issue unless you are going for pixel precision and …

[PaulOB]

@asasass

I want to know what the issues are with the 3 codes I provided.

As TechnoBear has shown above I have answered those questions a number of times.

Not to mention that I removed 5 sets of divs in my example as they were unnecessary saving about 150 characters in all.

If by ‘best’ you mean the shortest code then mine wins. If you mean more robust then mine wins.