如何调整HTML元素内文本位置？解决导航栏文本贴边问题

给导航栏的.sections类添加**内边距（padding）**就能解决文本贴近边缘的问题，以下是修改后的代码：

.sections {
  height: 75px;
  width: 500px;
  background-color: #18148b;
  line-height: 75px;
  margin-bottom: 5px;
  color: white;
  /* 添加左右内边距，拉开文本与边缘的距离 */
  padding: 0 15px;
}

#sectionList {
  background-color: #131067;
  height: 100%;
  width: 500px;
}

<div id="sectionList">
  <ul id="list" style="list-style-type: none; margin: 0; padding: 0;">
    <li id="section1" class="sections">Section1</li>
    <li class="sections">Section2</li>
  </ul>
</div>

说明： #

• padding: 0 15px 表示上下内边距为0，左右各15px，你可以根据视觉需求调整数值（比如10px、20px）；
• 内边距是在元素内部增加空间，不会改变元素的整体高度（因为你已经固定了height为75px，行高也匹配，上下内边距设为0避免内容错位）。

内容的提问来源于stack exchange，提问作者Allen