摆脱文本缩进

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"的元素和 20px 由于它自己的左填充。因此，第一个和第二个 Module Name 总共应该缩进 70px。因此两者都应该以相同的缩进放置，但事实并非如此。

那么，我在这里遗漏了什么或者我做错了什么？

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 以获得对内联和内联块元素之间白色 space 的良好解释。

Answer 2

没有必要将 nameTitle 设为 inline-block，因为您将元素显示为块。

因此，第一个和最后一个元素保持相同的 CSS 样式。

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

摆脱文本缩进

Get rid from the text indentation

css

indentation

padding