I’m having an issue with objects that I put margin/padding 0, it still leaves either a small gap on the side, or a teeny tiny sliver of a gap. I have no idea what I’m doing wrong, any suggestions?
Problem item 1: .main-img
It’s an image that is meant to take up the whole width of the page. yet still has a small margin to the left and right. I’ve inspected it and it says there shouldn’t be any margin but there is. I’ve tried “object-fit: cover” and it still did nothing.
<img class="main-img" src="https://i.imgur.com/7FM0f8p.png" alt="Couple kayaking with Kalypso Kayak">
Problem item 2: .item-name
I’m styling the title inside a box to have a background, and should have no margin for the item-name and no padding from the container; and yet there is still that teeny tiny sliver of a margin between the border and the background color. What could I be messing up here?
<div class="item-name">Journier Kayak</div>
<li>Solid frame with a stretch over cover</li>
<li>Compact durable touring model</li>
<li>Built for the demanding paddler</li>
It might prove helpful if you could post a link to the entire html-page and css-file (codepen or not). In the mean time you could try having a look at your page using the web developer tools in Firefox or the developer tools in Chrome to see where the extra padding or margin might come from.
Ok, it works if you set the margin to 0 in *.
But I would really appreciate if somebody could explain the difference between *, html and body. I mean, changing the style on any of them should have the same effect on the style of the page?
Not all properties are inherited, margin is one of the non-inherited properties. Child elements do not inherit the margin set on a parent (that would be annoying). If you set 0 margin on the html or body, it just sets it on that element. If you use the universal selector it selects all elements (except for pseudo-elements) and sets whatever properties you add for all elements.
If you look up an element on MDN and scroll down to the specifications you will see a blue box where one of the entries is Inherited and a yes or no value.
You can use the inherit keyword to explicitly specify inheritance. Here is an example of box-sizing being set on the html and the universal selector used with the inherit keyword.
Oooh, this makes so much sense! I never knew margin wasn’t inherited, but as you say, that would just be annoying… I’ll definitely pay more attention to that “Inherited” on MDN specifications from now on
Thanks so much for the clear explanation!