How do I place margin between an image and a list in HTML?

Question

How do I place margin between an image and a list in HTML?

I tried this, but the sorted list keeps pasting the image

ol {
                margin-left: 5px;
            }
figure {
                margin-left: auto;
                margin-right: 20px;
                }

1

html css margin

Author: Eric Clero, 2018-07-27

Source

1 answers

score 1 · Accepted Answer

Your problem is not exactly with the margin alone, but with the list-style-position: outside/inside;

In this link there are some practical examples for you to see: https://www.w3schools.com/cssref/pr_list-style-position.asp ;

In this example you can understand how the property works.

ol.a {
    list-style-position: outside;
}

ol.b {
    list-style-position: inside;
}
ol {
  margin-left: 5px;
}
img {
  float: left;
  margin-left: auto;
  margin-right: 20px;
}

<img src="https://placecage.com/200/100">
<p><b>Lista Outside (pra fora) com o <i>list-style-position: outside;</i></b></p>
<ol class="a">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
<br>
<img src="https://placecage.com/200/100">
<p><b>Lista Inside(pra dentro) com o <i>list-style-position: inside;</i></b></p>
<ol class="b">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>