Question 416158 in Html Question posted in
Some basic documentation can be found here.

How to change the position of the text in a HTML element?

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?

Navigation Bar

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

2

Answers


  1. 0

    just add CSS:

    ul#list > li {
  box-sizing   : border-box;
  padding-left : 1.5em;
  }

    .sections {
  height           : 75px;
  width            : 500px;
  background-color : #18148b;
  line-height      : 75px;
  margin-bottom    : 5px;
  color            : white;
  }
#sectionList {
  background-color : #131067;
  height           : 100%;
  width            : 500px;
  }
ul#list > li {
  box-sizing   : border-box;
  padding-left : 1.5em;
  }
    <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>
    Login or Signup to reply.
  2. 0

    padding-left: 15px; /* Adds padding */

    box-sizing: border-box; /* Ensures padding doesn’t increase the total width */

    add this lines to .sections class

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search