Chris W. Chris W. - 1 year ago 74
CSS Question

Negative margin use to put label above div

I know I'm missing something basic, who wants to humble me?

What I'm shooting for;
enter image description here

Where I'm stuck;

.labels {
display: inline-block;
color: #9e9e9e;
text-align: center;
border-top: #9e9e9e 1px solid;
border-left: #9e9e9e 1px solid;
border-right: #9e9e9e 1px solid;
height: 10px;
.labels span {
margin-top: -15px;
#label1 {
margin-right: 20px;
width: 253px;
#label2 {
width: 480px;

<div id="label1" class="labels">
<span>Label 1</span>
<div id="label2" class="labels">
<span>Label 2</span>


Thanks, kicking the rust off after too long in the xaml world. ;)

Answer Source

The span tags are for default inline elements, therefore properties like padding or margin has no effect. You need to change that behavior:

.labels span {
  margin-top: -15px;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download