css - How to change the position of the text in a HTML element? - Stack Overflow

admin管理员组

文章数量:1122832

I am making a navigation bar in my website and I realized the text is just too close to the edge of the buttons. How can I fix this?

Here is the code I used:

.sections {
  height: 75px;
  width: 500px;
  background-color: #18148b;
  line-height: 75px;
  margin-bottom: 5px;
  color: white;
}

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

I am making a navigation bar in my website and I realized the text is just too close to the edge of the buttons. How can I fix this?

Here is the code I used:

.sections {
  height: 75px;
  width: 500px;
  background-color: #18148b;
  line-height: 75px;
  margin-bottom: 5px;
  color: white;
}

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

• html
• css

Share Improve this question Follow edited Nov 23, 2024 at 3:23 Mister Jojo 22.2k66 gold badges2525 silver badges4242 bronze badges asked Nov 23, 2024 at 3:21 AllenAllen 3933 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 3

You have to have your css something like this.

Set every element's margin and padding to 0 and box-sizing to border box.

After that you can apply required margin and padding to different tags.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.sections {
  height: 75px;
  width: 500px;
  background-color: #18148b;
  margin-bottom: 5px;
  color: white;
  padding: 30px 10px;
}

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

Just add padding to li tag in style for better control

ul#list li{padding:5px 10px 15px 20px;}

In this example, padding is top:5px, right:10px, bottom:15px and left:20px You can set according to your requirement

padding-left: 15px; /* Adds  padding */
box-sizing: border-box; /* Ensures padding doesn't increase the total width */

Add this lines to .sections class.

本文标签： cssHow to change the position of the text in a HTML elementStack Overflow