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

Asked

Viewed 150 times

1

I tried that, but the ordered list is still pasted to the image

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

inserir a descrição da imagem aqui

html css margin

1 answer

1


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

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

  • In the Inside case, how do I place a spacing so that it doesn’t align with the heading, but gets more inside?

  • @Ericclero what happens is that the image has float:left, so the margin does not work right to left. You can correct this by putting display: inline-block in OL, and then make some adjustment to the margin if you think it is necessary. If it doesn’t work, just open up another question with your updated code and I’ll help you look good. There I do not modify this answer that is already solved. Test there with the display:inline-block and qq thing tells me or opens another question ok that I help you.

Browser other questions tagged html css margin

You are not signed in. Login or sign up in order to post.