html - 在元素之间添加空间，使背景不水平拉伸(stretch)

Question

我正在练习基本的 HTML 编程，并在两个标题之间的代码中添加了一个列表对象。当我查看列表 background 时，我看到它一直延伸到页面的一侧。关于这个我想知道如何限制背景的 width 以便它在覆盖 li 元素之后结束(也很好奇如何让它向下拉伸(stretch) - 也许我需要另一个div?)

还想在 li 元素之间添加一些间距，如我有一本书中所示。我已按照说明添加了 liststyle li {}，但 ul 框没有响应。对于上述问题，它也不响应 side/background-size 属性。

我怎样才能让这个列表框工作？

部分HTML代码:

.liststyle { /* class */
	    list-style: square; /* circle / lower-roman  */
	    padding : 15px; /*spacing between border and element*/
	    margin : 20px; /*spacing outside border*/
	    background: #66ccff; /*background box colour */
	    color: #ff0000; /*text color */
	    list-style-position: inside; /*get bullets inside background box*/
	
	    border-style: double;
	    border-width: 5px;
	    border-color: #600;
	
	    size: 100px 100px; /* background stretches horizontally to side of page*/
    }

    .liststyle li{ /*trying to get spacing between list items - will not work*/
	    padding-bottom = 100px;
    }

<h1>National Geographic</h1>
<h2>How a Remote Peak in Myanmar Nearly Broke an Elite Team of Climbers</h2>

	<ul class="liststyle"> 
		<li>the beggining</li>
		<li>reaching the rampart</li>
		<li>regrouping</li>
		<li>freezing cold</li>
	</ul>

<h4>On one of mountaineering’s most dangerous journeys, 	
	group was pushed to the limit by physical and mental challenges.</h4>

Answer 1

• 没有 size 属性，认为 background-size 存在(尽管您不需要它，因为它只是一个 background-color)
• 你有 padding= 应该是 padding:
• 你可以使用边框 shortand
• 要包含背景，您需要在 ul + display:inline-block 中使用 max-width
• (额外)添加 box-sizing:border-box 它将使 border+padding 成为 计算的一部分宽度

.liststyle {
  /* class */
  list-style: square;
  /* circle / lower-roman  */
  padding: 15px;
  /*spacing between border and element*/
  margin: 20px;
  /*spacing outside border*/
  background: #6cf;
  /*background box colour */
  color: #ff0000;
  /*text color */
  list-style-position: inside;
  /*get bullets inside background box*/
  border: 6px solid #600;
  max-width: 300px;
  display: inline-block;
  box-sizing:border-box
}
.liststyle li {
  /*trying to get spacing between list items - will not work*/
  padding-bottom:100px;
}

<ul class="liststyle">
  <li>the beggining</li>
  <li>reaching the rampart</li>
  <li>regrouping</li>
  <li>freezing cold</li>
</ul>

<h4>On one of mountaineering’s most dangerous journeys,     
group was pushed to the limit by physical and mental challenges.</h4>