azad azad - 4 months ago 14
CSS Question

How render text correctly inside a Div?

In the following example you can see that 'c' and 'x' going out from the div how to place correctly inside the div?



.d {
padding-left: 20px;
border-left-width: 2px solid;
border-left-style: solid;
border-left-color: rgb(255, 0, 0);
border-top-width: 2px solid;
border-top-style: solid;
border-top-color: rgb(255, 0, 0);
border-bottom-width: 2px solid;
border-bottom-style: solid;
border-bottom-color: rgb(255, 0, 0);
display: inline-block;
height: 30px;
position: relative;
background-color: 'white';
}
.controllContainer {
position: absolute;
top: 0px;
left: 0px;
}
.controls {
border: 1px solid;
width: 10px;
height: 10px;
margin: 3px;
}

<div class="d " style="">
test text
<svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

</polyline>
</svg>
<div class="controllContainer">
<div class="controls">c</div>
<div class="controls">x</div>
</div>
</div>




Answer

Add line-height to the .controls.

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
  line-height: 9px; /* added here */
}
<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Comments