CODEWITHSUNDEEP
htmlcss
inabramova
inabramova

Reputation: 311

Using negative margins % to stack elements on top of each other

Been trying to get the lines to show stacked and occupying the full width of the parent, but something is offsetting the subsequent lines, only the first line (aligned to bottom) shows up properly:

.sp-line{
  display: inline-block;
  width: 100%;
  margin-right: -100%;
  position: relative;
  z-index: 10;
  border-top: 1px dotted #000;
}
.sp_baseline{
  border-color: blue;
  vertical-align: baseline;
}
.sp_text-bottom{
  border-color: green;
  vertical-align: text-bottom;
}
.sp_bottom{
  border-color: red;
  vertical-align: bottom;
}
.sp_text-top{
  border-color: green;
  vertical-align: text-top;
}
.line{
  border: 1px solid cyan;
}

span.text {
  background-color: papayawhip;
  line-height: 1.96; 
}
<div class="line">
  <span class="sp-line sp_bottom"></span>
  <span class="sp-line sp_baseline"></span>
  <span class="sp-line sp_text-bottom"></span>
  <span class="sp-line sp_text-top"></span>
  <span class="text1 text">SINGLE line</span>
</div>

Trying to get to:

enter image description here

I was just trying to recreate the lines from https://christopheraue.net/design/vertical-align I don't see what I'm missing here.

Upvotes: 0

Views: 295

Answers (2)

MichaelvE
MichaelvE

Reputation: 2578

I believe the issue you're experiencing has something to do with the width of 100% on your sp-class. It needs to take into account the border on the .line class (cyan outline), and some spacing on the font. I've set the width to calculate it at 100% less 4px to cater for this:

.sp-line {
  display: inline-block;
  width: calc(100% - 4px);
  margin-right: -100%;
  position: relative;
  z-index: 10;
  border-top: 1px dotted #000;
}

.sp_baseline {
  border-color: blue;
  vertical-align: baseline;
}

.sp_text-bottom {
  border-color: green;
  vertical-align: text-bottom;
}

.sp_bottom {
  border-color: red;
  vertical-align: bottom;
}

.sp_text-top {
  border-color: green;
  vertical-align: text-top;
}

.line {
  border: 1px solid cyan;
}

span.text {
  background-color: papayawhip;
  line-height: 1.96;
}
<div class="line">
  <span class="sp-line sp_bottom"></span>
  <span class="sp-line sp_baseline"></span>
  <span class="sp-line sp_text-bottom"></span>
  <span class="sp-line sp_text-top"></span>
  <span class="text1 text">SINGLE line</span>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272648

No need to make the element width:100% and use negative margin. Instead you can keep the element small to have them in one line and rely on overflow to have the dotted lines cover all the area:

.line {
  overflow-x:hidden;
}

.sp-line{
  display: inline-block;
  width: 2px;
  position: relative;
  z-index: 10;
}
.sp-line:before {
  content:"";
  position:absolute;
  border-top: 1px dotted;
  bottom:0;
  left:-100vw; /*big value here*/
  right:-100vw;/*big value here*/
}
.sp_baseline{
  color: blue;
  vertical-align: baseline;
}
.sp_text-bottom{
  color: green;
  vertical-align: text-bottom;
}
.sp_bottom{
  color: purple;
  vertical-align: bottom;
}
.sp_top{
  color: red;
  vertical-align: top;
  transform:translateY(1px); /*we move the top one by 1px so we can see it*/
}
.sp_text-top{
  color: green;
  vertical-align: text-top;
}

span.text {
  background-color: papayawhip;
  line-height: 1.96; 
  font-size:40px;
}
<div class="line">
  <span class="text1 text">SINGLE line</span>
  <span class="sp-line sp_bottom"></span>
  <span class="sp-line sp_top"></span>
  <span class="sp-line sp_baseline"></span>
  <span class="sp-line sp_text-bottom"></span>
  <span class="sp-line sp_text-top"></span>
</div>

Upvotes: 1

Related Questions