How should I add some space between the text and the border using CSS?

Question

I was messing around with an unordered list to make a semblance of a navigation page, and I've had a problem I can't fix. Each border around the words are very closed in, and I don't have any idea how to make the area inside the borders bigger meaning I want the border to be farther away from the word.

I know it looks horrible, but I'm really just focused on making it work properly rather than making it look good.

Here is my HTML:

<!doctype=html>

<html>

<head>
    <meta charset="utf-8" />
    <title> Test Title </title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
<div class="wrap">
    <h1 class="test"> Blah Blah </h1>
    <ul>
        <li class="navigation"><a class="navitem" href="#"> Blog </a></li>
        <li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
        <li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
        <li class="navigation"><a class="navitem" href="#"> About </a></li>
    </ul>
</div>
</body>

</html>

And this is my CSS:

.wrap
{
    width: 1000px;
    height: 800px;
    margin: auto;
    background-color: black;
    color: white;
    font-family: sans-serif;
    text-align: center;
}

.navigation
{
    display: inline;
    list-style: none;
    padding-right: 50px;
}

.navitem
{
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
}

.navitem:hover
{
    color: 339900;
    border-color: 339900;
}

The answers will probably fix your immediate problem, but if you want to know more you should probably look up on the `display` property ([W3 spec](http://www.w3.org/TR/CSS2/visuren.html#display-prop), [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)). You are styling `inline` items whereas you may have expected to be working with `inline-block` items. — Jeroen, Dec 31 '13 at 06:13

score 9 · Accepted Answer · edited Oct 01 '22 at 16:13

If you want to have some space between the words and the border, than you need to use padding property for that

.navitem {
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px;
}

Demo

Also, you can write the same thing as border: 1px solid green; which is nothing but the border shorthand.

Also, you told us that you are a fresher. Make sure you reset the default margin and padding which are applied by the browser by using

* {
   margin: 0;
   padding: 0;
}

Or by using CSS Reset Stylesheet so that your menu styles position stays consistent across the browsers.

Lastly, you do not need to call classes on each of your element, you can leave it up to CSS selectors to select them... So get rid of all the classes, and just assign a class to the parent element, and use the selectors below..

Am assigning class to ul which is main_navigation so now we will select all the first level li using

.main_navigation > li {
   /* Target direct child to .main_navigation */
}

And to target direct a inside those li we will use

.main_navigation li a {
    /* Target direct child to .main_navigation > li */
}

Refactored Demo

score 3 · Answer 2 · edited Oct 01 '22 at 16:17

3

Just add padding in NavItem:

.navitem
{
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px 10px; // The first 5px is for Height, and the second 10px is for Width. Adjust it for your needs.
}

edited Oct 01 '22 at 16:17

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:09

Kirk

4,957
2
32
59

`//` is [not a valid comment character sequence in CSS](https://stackoverflow.com/questions/34797790/why-are-some-of-my-css-rules-not-working/34799134#34799134) (only the C-style one is, `/* */`). This is also indicated by the weird syntax highlighting here. It *will* break in some browsers (e.g., it may ignore all or part of the rest of the CSS (terminate parsing)). – Peter Mortensen Oct 01 '22 at 17:35

score 2 · Answer 3 · edited Oct 01 '22 at 16:16

2

Add the following in your CSS content:

ul li a {
   padding: 10px;
}

edited Oct 01 '22 at 16:16

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:09

Manish Jangir

5,329
4
42
75

score 2 · Answer 4 · edited Oct 01 '22 at 17:53

2

Add the following in your CSS:

ul li a
{
   padding: 10px;
}

Or you can set your class as:

.navitem
{
    width: 100px; /* Set width and height as you wish */
    height: 100px;
    color: white;
    text-decoration: none;
    border: 1px solid green;
}

edited Oct 01 '22 at 17:53

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:14

Pritam Aherkar

87
1
6

score 1 · Answer 5 · edited Oct 01 '22 at 16:09

1

Just add some padding to the list items:

.navitem {
   padding: 5px;
}

edited Oct 01 '22 at 16:09

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:08

EfrainReyes

1,005
2
21
55

Raunak Kathuria · Answer 6 · 2022-10-03T02:13:32.680

1

Update the CSS content with

.navitem {
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px 10px;
    /* It specified a padding of 5px to top and bottom and 10px to left and right */
}

You can also use padding-top, padding-left, padding-right, padding-bottom individually also as per your requirement.

Demo

edited Oct 03 '22 at 02:13

answered Dec 31 '13 at 06:12

Raunak Kathuria

3,185
1
18
27

`//` is [not a valid comment character sequence in CSS](https://stackoverflow.com/questions/34797790/why-are-some-of-my-css-rules-not-working/34799134#34799134) (only the C-style one is, `/* */`). This is also indicated by the weird syntax highlighting here. It *will* break in some browsers (e.g., it may ignore all or part of the rest of the CSS (terminate parsing)). – Peter Mortensen Oct 01 '22 at 17:36
Thanks for pointing out. Updated @PeterMortensen – Raunak Kathuria Oct 03 '22 at 02:13

score 1 · Answer 7 · edited Oct 01 '22 at 17:54

1

Use:

.wrap
{
    width: 1000px;
    height: 800px;
    margin: auto;
    font-family: sans-serif;
    text-align: center;
}

.navigation
{
    display: inline;
    list-style: none;
    padding-right: 50px;

}

.navitem
{
    padding: 5px;
}

edited Oct 01 '22 at 17:54

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:17

shiny

124
6

An explanation would be in order. We may still get it (still not in years): *"Last seen more than a month ago"* – Peter Mortensen Oct 01 '22 at 17:55

score 1 · Answer 8 · edited Oct 01 '22 at 17:59

In order to manipulate each list-item as a box, you need to put each <li> item into a <div>. A <div> works as a container, or as a box. You can then specify height, width, text alignment, borders, etc. for it. So, your HTML should look like this:

<html>

<head>
<meta charset="utf-8" />
<title> Test Title </title>
<!-- <link rel="stylesheet" href="../CSS/style.css" /> -->
</head>

<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Blog </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> About </a></li>
    </div>
</ul>
</div>
</body>

</html>

Whereas your CSS could be:

.wrap
{
    width: 1000px;
    height: 800px;
    margin: auto;
    background-color: black;
    color: white;
    font-family: sans-serif;
    text-align: center;
}

.navigation
{
    display: inline;
    list-style: none;
}

li.navigation
{
    text-align: center;
}

.navitem
{
    color: white;
    text-decoration: none;
}

.navitem:hover
{
    color: 339900;
    border-color: 339900;
}

div.box
{
    height: 25px;
    width: 100px;
    border: 1px solid;
    border-color: green;
    display: inline-block;
    padding: 20px;
    margin: 20px;
}

score 0 · Answer 9 · edited Oct 01 '22 at 17:49

0

Change anchor display to inline-block and add some padding

.navitem
{
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;

   display: inline-block;
   padding: 7px 15px;
}

edited Oct 01 '22 at 17:49

Peter Mortensen

30,738
21
105
131

answered Dec 31 '13 at 06:12

Shyam

782
5
12

How should I add some space between the text and the border using CSS?

9 Answers9

Change anchor display to inline-block and add some padding