Get rid from the text indentation

Question

How could I get rid from the text indentation in my case?

html:

<div class="mainContainer">
  <div class="promptTitle">
    Module Name
  </div>

  <div class="drawRegion">

  </div>

  <div class="nameTitle">
    Module Name
  </div>
</div>

css:

.mainContainer {
  border: 1px darkgray solid;
  border-radius: 10px;
}

.promptTitle {
  color: #b8b8b8;
  padding-top: 25px;
  padding-left: 70px;
}

.drawRegion {
  display: inline-block;
  width: 50px;
  margin-right: 0;
}

.nameTitle {
  display: inline-block;
  padding-left: 20px;
}

jsfiddle:

https://jsfiddle.net/76uedo40/561/

problem on screenshot:

My problem is that the second line of text Module Name is displayed with an indentation. I would expect to not have the indentation.

That is because the first Module Name indented 70px from left, while the second Module Name indented 50px from left due to the element with class="drawRegion" and 20px due to its own left padding. So, in total both first and second Module Name should indent 70px. And hence both should be placed with the same indentation, but this is not the case.

So, what am I missing here or what am I doing wrong?

.drawRegion + padding are in the way, reset and/or remove them. https://jsfiddle.net/76uedo40/563/ https://jsfiddle.net/76uedo40/565/ — G-Cyrillus, Sep 09 '18 at 13:14
@G-Cyr, this will remove the indentation totally. I want to remove the extra indentation only. — iloveseven, Sep 09 '18 at 13:16

ksav · Accepted Answer · 2018-09-09T13:26:39.883

Try removing the spacing between the drawRegion & nameTitle inline-block divs.

.mainContainer {
  border: 1px darkgray solid;
  border-radius: 10px;
}

.promptTitle {
  color: #b8b8b8;
  padding-top: 25px;
  padding-left: 70px;
}

.drawRegion {
  display: inline-block;
  width: 50px;
  margin-right: 0;
}

.nameTitle {
  display: inline-block;
  padding-left: 20px;
}

<div class="mainContainer">
  <div class="promptTitle">Module Name</div>
  <div class="drawRegion"></div><div class="nameTitle">Module Name</div>
</div>

Check this answer for a good explanation of white space between inline & inline-block elements.

score 0 · Answer 2 · answered Sep 09 '18 at 13:19

0

There's no point in making the nameTitle as inline-block as you display the elements as blocks.

Therefore, keep the same CSS styles for the first and the last element.

.nameTitle {
  display: block;
  padding-left: 70px;
}

answered Sep 09 '18 at 13:19

Ioan

5,152
3
31
50

check his code well, there is another element before (actually empty but with a width), so he don't need to make it block – Temani Afif Sep 09 '18 at 13:22
@TemaniAfif That one can be also `block`. – Ioan Sep 09 '18 at 13:25
no, because there is an element before and both should be on the same line – Temani Afif Sep 09 '18 at 13:27

Get rid from the text indentation

2 Answers2