How can I apply negative margin to an inline block?

Question

https://jsfiddle.net/yLrnp1x2/ In this fiddle I have a span element which I want to give a negative top-margin. I can not seem to succeed in any other way than defining display:block; for the span, which the demo will illustrate is obviously useless.

The elements chosen to populate the menu div, including the span, haven't been given any special thought and can be changed to anything that will achieve the same result. How can I achieve this?

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
  /* margin: 3px; */
  /* padding-top: -5px; */
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
  /* padding-top: 10px; */
}

.menu span {
  background-color: green;
  /* display: inline-block; */
  margin-top: -5px;
}

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <span>&nbsp;|&nbsp;</span>
    <a>Delete</a>
  </div>
</div>

Answer 1

It looks like you're trying to fix the alignment of the standard bar | character, which is displayed a little lower in HTML. You can use the Drawing Vertical Bar instead. To do so, you can either use its entity │ or its code │. The code is guaranteed to work, but the entity may not be supported in all browsers.

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
}

.menu span {
  background-color: green;
}

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <span>&nbsp;&#9474;&nbsp;</span> <!-- or <span>&nbsp;&boxv;&nbsp;</span> -->
    <a>Delete</a>
  </div>
</div>

Alternatively, it is more commonly done using borders. Something like this:

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
  padding-right: 3px;
  border-right: 1px solid #000;
}

.menu a:last-child {
  border-right: none;
}

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <a>Delete</a>
  </div>
</div>