Removing Negative Margin

How would I remove this negative margin and replace it? 2 Codes, which is better, how would you improve it?

How many different ways can this be done?

.link a {
        display: block;
        width: 50px;
        height: 50px;
        margin: -50px 0 0;
        background: black;
        box-Shadow: inset 0 0 0 3px #0059dd;
      }
<style>
  .wrap {
    position: relative;
    display: table;
    background:red;
  }
  
  .initial {
    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;
  }
  
  .playButton.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;
    
  }
  
  .link div {
    margin: 0 0 12px 0;
  }
  
  .link a {
    display: block;
    width: 50px;
    height: 50px;
    margin: -50px 0 0;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .hide,.play {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>


  <div class="wrap">
    <div class="myLink">
      <div class="link">
        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>

          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>
      </div>
    </div>

    <div class="playButton">
      <div class="initial">Links</div>
      <svg class="pause" 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="play" 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>

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

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

      function playButtonClickHandler() {
        document.querySelector(".myLink").classList.remove("hide");
        var button = document.querySelector(".playButton");
        var player = document.querySelector("#player");
        document.querySelector(".playButton .initial").style.display = "none";
        player.volume = 1.0;
        if (player.paused) {
          button.classList.add("playing");
          document.querySelector(".playButton .play").style.display = "none";
          document.querySelector(".playButton .pause").style.display = "inline-block";
          player.play();
        } else {
          document.querySelector(".playButton .play").style.display = "inline-block";
          document.querySelector(".playButton .pause").style.display = "none";
          player.pause();
        }
      }
1 Like

What have you tried?

One person told me to remove the margin entirely.
That didn’t work.

One way is by using:
display: flex;

Are there any other ways to do this?


Add display: flex to .link div:

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

Remove margin: -50px 0 0 from .link a:

.link a {
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
}

Replace the following block:

a.x1 {
    margin: 0;
}

a.x2 {
    margin-left: 54px;
}

a.x3 {
    margin-left: 108px;
}

a.x4 {
    margin-left: 162px;
}

a.x5 {
    margin-left: 216px;
}

By

a.x2, a.x4 {
    margin: 0 4px;
}

Which of these codes is better, and would you change anything in the code to improve it, to make it better?

Code 1

<style>
  .wrap {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial {
    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;
  }
  
  .playButton.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;
  }
  
  .link div {
    margin: 0 0 12px 0;
    height: 50px;
  }
  
  .link a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .hide,
  .play {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>

Code 2


<style>
  .wrap {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial {
    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;
  }
  
  .playButton.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;
  }
  
  .link div {
    margin: 0 0 12px 0;
    font-size: 0;
    /* Remove whitespace created by inline-block */
  }
  
  .link a:first-child {
    margin-left: 0px;
  }
  
  .link a {
    width: 50px;
    height: 50px;
    margin: 0;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
    margin-left: 4px;
  }
  
  .hide,
  .play {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>

Code 3
https://jsfiddle.net/kb4bge66/13/

<style>
    .wrap {
    position: relative;
    display: table;
    background: red;
  }
  
  .initial {
    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;
  }
  
  .playButton.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: green;
  }
  
  .preventWrapping {
    white-space: nowrap;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }
  
  .myLink a {
    vertical-align: top;
  }
  
  .play,
  .pause {
    {
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-color: red;
      fill: #aaff00;
    }

</style>

What have you tried?

What do you mean what have I tried, all I’m asking is , between the 3 codes, Code 1, Code 2, and Code 3, which code is better to use, and how would you improve it if it needs to be improved.

Exactly just that.

  • When you tested them in the W3C validator, did they both pass?
  • When you cross-browser tested did they both look good to you?
  • When you tested different view-port dimensions did they both still look good to you?
  • When you tested with different browser zoom and font settings did they both still look good to you?
4 Likes

All 3 passed.

When you cross-browser tested did they both look good to you?

All 3 looked the same on internet explorer 11.

When you tested with different browser zoom and font settings did they both still look good to you.

I see no difference.

1 Like

How do you do this?

Just resize your browser and see if the page you’ve created acts responsively.

A lot of browsers have emulators as part of their dev tools, but IMHO the easiest way is to “grab” the edge of the browser window’s chrome and move it to make the view-port have different widths.

The code is not that big so, the window size has no effect on the code.

Good enough there then. How’s it look with various zoom and font settings?

No issue on any of that. Each of the 3 codes uses different methods to accomplish the same thing.

Which code uses the better, more proper method, I’m not sure.

Code 1


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

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

Code 2

  .link div {
    margin: 0 0 12px 0;
    font-size: 0;
    /* Remove whitespace created by inline-block */
  }

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

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

Code 3
https://jsfiddle.net/kb4bge66/17/

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

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

There is no such thing as a “one best way” that will be “best” in all possible situations. To a very great extent, how things are put together depends on the context and the designers preferences. More often than not, there are many ways to tackle a problem.

Armed with a thorough knowledge of where the HTML structure is at and where it may go, the designer can decide which selectors to use that will hopefully be the least fragile. Similarly, with a good understanding of what CSS rules do what, appropriate CSS rules can be chosen to work with the HTML.

IMHO, ensuring that the HTML passes validation is the best thing you can do to make sure a page will look good no matter what device, what browser, what view-port dimensions or what browser settings a visitor may be viewing the page with.

Ideally, a page would be checked with every possible combination, which is impossible. But it is a very good idea to test with every possible popular version browser you can install on your computer in as many ways as you can test them. If you’re really concerned, there are online services that can test how a page would look in other browsers for you.

3 Likes

I just want someone or, a bunch of people to look at these codes and say which one they like best, and why.

Is the entire web page online somewhere where its HTML and CSS can be found? Judging a snippet out of context is rather pointless. As long as there are no glaring faults the only why to know if one way has benefit over any other is to see it in relation to the page it’s in.

1 Like

Here’s all 3 codes on 1 page so you can compare.
http://testing45435.blogspot.com/

That page’s code is all yours?
It doesn’t pass HTML validation - 14 errors
https://validator.w3.org/nu/?doc=http%3A%2F%2Ftesting45435.blogspot.com%2F&showsource=yes

Nor does it pass CSS validation - 67 errors, 155 warnings
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftesting45435.blogspot.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

That said, the three looked OK to me using iPad Safari

How do they look in their own pages that are not part of a Blogger page?