How do I put margin between an image and an HTML list?

1

I tried this, but the ordered list continues to paste the image

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

    
asked by anonymous 27.07.2018 / 15:48

1 answer

1

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

This link has some practical examples to see: link ;

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>ListaOutside(prafora)como<i>list-style-position:outside;</i></b></p><olclass="a">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
<br>
<img src="https://placecage.com/200/100"><p><b>ListaInside(pradentro)como<i>list-style-position:inside;</i></b></p><olclass="b">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
    
27.07.2018 / 16:11