kanr kanr - 4 months ago 9
HTML Question

adding space between items, making background not stretch horizontally

I'm practicing basic HTML programming and have added a list object to the code between two headings. when I view the list

background
I see that it stretches right to the side of page. About this I want to know how to limit the
width
of background so it ends just after covering the
li
elements (also curious how to get it stretch downward - maybe I need another
div
?)

also want to add some spacing between the
li
elements as shown in a book I have. I have added
liststyle li {}
as instructed but the
ul
box does not respond. it also does not respond to
side / background-size
properties for above issue.

how could I get this list box working?

part of the HTML code:



.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
  • there is no size property, exists thought background-size (although you don't need this since it is only a background-color)
  • you have padding= should be padding:
  • you can use border shortand
  • to contain the background, you need to use a max-width in ul + display:inline-block
  • (extra) adding box-sizing:border-box it will make the border+padding part of the calculations for width

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

Comments