如何在水平无序列表之间插入空格

Question

我正在尝试在我的网站上占据顶部。 我需要在徽标和边框中的名称之间留出更多间距。 我的 CSS：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.list {
border-style: ridge;
border-color: green;
border-width: 25px;
}

我想要在图像和名称之间留出更多的空间，现在它相距大约一两厘米。

Answer 1

使用"margin"属性在任何定义的边框之外的元素周围创建空间。有一些属性可用于设置元素每边的边距(上边距、右边距、下边距和左边距(。

示例代码

div {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 100px;
  }

如果要在元素内容周围或任何定义的边框内生成空间，请使用"填充"。

示例代码

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  }

有关更多详细信息，请参阅以下链接。

https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sideshttps://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

Answer 2

您可以随时使用margin-right并将其应用于您的徽标。但是，请记住，不要让它在较小的屏幕上弄乱您的布局。

Answer 3

使用 边距 ： 0 15px;(对于侧边距(或，边距 ： 15px 0： ( 用于上边距和下边距(

但是，如果您希望边框和内容之间的空格，请改用填充。