html - 如何在水平无序列表之间插入一个空格

Question

我正在努力使我的网站成为顶级。我需要在 Logo 和边框中的名称之间留出更多间距。我的 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-top、margin-right、margin-bottom 和 margin-left)。

示例代码

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_sides https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu