CSS margin and padding problem

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.

HTML

<img class="main-img" src="https://i.imgur.com/7FM0f8p.png" alt="Couple kayaking with Kalypso Kayak">

CSS

.main-img{
    margin: 2em 0px 1em 0px;
	width: 100%;
}

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?

HTML

<div class="price-block">
	<div class="item-name">Journier Kayak</div>
	<div class="item-description">
		<span class="emphasis">$1,500</span>
		<ul>
			<li>Solid frame with a stretch over cover</li>
			<li>Compact durable touring model</li>
			<li>Built for the demanding paddler</li>
		</ul>
	</div>
</div>

CSS

.emphasis{
	font-size:2em;
	margin: .5em;
	color: #184487;
}

.price-block{
	border: 10px solid #D66569;
	border-radius: 10px;
	padding: 0;
	margin:  1em;
	text-align: center;
}

.item-name{
	width: 100%;
	margin: 0;
	padding: .5em 0;
	font-size: 2em;
	background-color: #FCF862;
	color: #163d78;
}

.item-description{
    padding: 2em;
	font-size: 1.1em;
}

Any help is much appreciated!

Hi! Try giving your whole html a margin and a padding of 0 at the beginning of your css sheet. This should override any browser settings.

I tried it in root and html. I thought that maybe the image just didn’t extend past a certain point, but when I go to inspect and toggle the device display it still has the padding.

It’s so perplexing, I’m gonna start pulling my hair out lol!

My first try would be to set the image to display:block, and to check if the container of the image has a padding.

1 Like

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.

You’re right. Here check it out

and thank you!!!

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?

omg, i totally forgot about *
Thank you!!
and I would also like to know why they are different. I tried, :root, html, and body.

Yes, I keep doing that, trying through all of them until one works :sweat_smile:

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.

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

2 Likes

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 :grinning:
Thanks so much for the clear explanation!

Oh! I had never looked at it that way. Thank you very much!