Chris W. Chris W. - 1 month ago 5
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>
<div id="label1" class="labels">
<span>Label 1</span>
</div>
<div id="label2" class="labels">
<span>Label 2</span>
</div>
</div>





CodePen

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

Answer

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 {
  display:block;
  margin-top: -15px;
}

CodepenDemo

Comments