Margin shown above unordered list-CodePudding

i have another weird html/css-question for you. I want to make little sections with different offers. So this code is one section (not the full code so it doesn't work pretty well):

.aroundworld .colquater {
    width: 260px;
    margin-left: 20px;
    margin-right: 20px;
}
.aroundworld .hotelpictures {
    width: 260px;
    margin-bottom: 8px;
    display: block;
}
.aroundworld .category {
    margin-bottom: 5px;
    color: #a56037;
    font-size: 14px;
    font-weight: 600;
}
.aroundworld .type {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 600;
    text-align: justify;
}
.aroundworld .price {
    margin-bottom: 5px;
    color: gray;
    font-size: 16px;
}
.aroundworld ul {
    overflow: hidden;
}
.aroundworld li {
    float: left;
}

<div >
  <img  src="pictures/hotel-1.jpg">
  <p >GANZE WOHNUNG &middot; KOPENHAGEN</p>
  <p >Sonniges Penthouse mit 5 Balkonen</p>
  <p >206€ pro Nacht</p>
  <ul >
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
  </ul>
  <p >320</p>
</div>

If i look now in Chrome with "F12" i can see the following overview:

Why is there a margin shown? The margin isn't really there, right?

CodePudding user response：

How does you .left class look? try setting margin: 0; since default is: "The ul and ol elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em)."

You can set it like this to remove all margins:

ul {
margin: 0;
}

or just on the top:

ul {
margin-top: 0;
}

This will affect all UL in your code. Otherwise put it on the .left class. https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists