我应该如何使用CSS在文本和边框之间添加一些空格

Question

问

我应该如何使用CSS在文本和边框之间添加一些空格

手机用户2502885647_951 发布于 2023-02-07 13:28

我是编程新手,也是HTML的初学者.我正在乱搞一个无序的列表来制作一个导航页面,我遇到了一个我无法解决的问题.单词周围的每个边框都非常封闭,我不知道如何使边框内的区域更大,这意味着我希望边框离这个单词更远.我知道它看起来很糟糕,但我真的只是专注于让它正常工作而不是让它看起来很好.任何帮助都会很棒,谢谢!

这是我的HTML:






    
     Test Title 
    




     Blah Blah 
    
         Blog 
         Facebook 
         Twitter 
         About

这是我的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;

}

Mr. Alien.. 7

如果你想在单词和边框之间留出一些空间,那么你需要使用padding属性

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

演示

此外,你可以写同样的东西,border: 1px solid green;只是border简写.

另外,您告诉我们您更新鲜,请确保重置默认值margin以及padding浏览器使用的默认值

* {
   margin: 0;
   padding: 0;
}

或者使用CSS重置样式表,以便您的菜单样式位置在浏览器中保持一致.

最后,你不需要在你的每个元素上调用类,你可以把它留给CSS选择器来选择它们......所以去除所有类,只需将一个类分配给父元素,然后使用选择器下面..

AM分配类ul是main_navigation现在我们将选择所有的第一级li使用

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

并直接定位a在li我们将使用的内部

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

重构演示

1 个回答

如果你想在单词和边框之间留出一些空间,那么你需要使用padding属性
```
.navitem {
    color: white;
    text-decoration: none;  
    border-style: solid;
    border-color: green;
    padding: 5px;
}
```
演示

此外,你可以写同样的东西,border: 1px solid green;只是border简写.

另外,您告诉我们您更新鲜,请确保重置默认值margin以及padding浏览器使用的默认值
```
* {
   margin: 0;
   padding: 0;
}
```
或者使用CSS重置样式表,以便您的菜单样式位置在浏览器中保持一致.

最后,你不需要在你的每个元素上调用类,你可以把它留给CSS选择器来选择它们......所以去除所有类,只需将一个类分配给父元素,然后使用选择器下面..

AM分配类ul是main_navigation现在我们将选择所有的第一级li使用
```
.main_navigation > li {
   /* Target direct child to .main_navigation */
}
```
并直接定位a在li我们将使用的内部
```
.main_navigation li a {
      /* Target direct child to .main_navigation > li */
}
```
重构演示
2023-02-07 13:31 回答

没搜摸索摸索_685

撰写答案