摆脱文字缩进

Question

我该如何摆脱文字缩进？

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/

屏幕截图问题：

我的问题是，文本Module Name的第二行带有缩进显示。我希望没有缩进。

这是因为第一个Module Name从左边缩进70px，而第二个Module Name从左边缩进50px是由于元素class="drawRegion"和{ {1}}由于其自己的左侧填充。因此，第一20px和第二Module Name都应缩进。因此，两者都应以相同的缩进方式放置，但事实并非如此。

那么，我在这里想念什么还是做错了什么？

Answer 1

尝试删除drawRegion和nameTitle内联块div之间的间距。

.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>

选中this answer，可以很好地解释嵌入式元素和嵌入式块元素之间的空白。

Answer 2

将元素显示为 block 时，将nameTitle设置为inline-block毫无意义。

因此，对于第一个元素和最后一个元素，请保留相同的CSS样式。

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