Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

I'm pretty new to programming and a complete beginner with HTML. 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 have no 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. Any help would be great, thanks!

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;

}
like image 497
Daas Avatar asked Dec 31 '13 06:12

Daas


2 Answers

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

like image 153
Mr. Alien Avatar answered Sep 25 '22 06:09

Mr. Alien


Just add padding in NavItem

.navitem
{
    color: white;
    text-decoration: none;  
    border-style: solid;
    border-color: green;
    padding: 5px 10px; //1st 5px is for Height, 2nd 10px is for Width adjust it for your need
}
like image 34
Kirk Avatar answered Sep 25 '22 06:09

Kirk