Member Avatar for McLaren

Hi,

the default image formating is such:

img {
	padding: 8px;
	border:none;
}

Now when my image is in this span I want it not to have padding.

<span class="article_img">
<input type="radio" name="image" value="">
<img class="no_padding" src="">
<a class="trinti_img" href="" id="naujiena16.jpg">
<img src=""></a>
</span>

And I made code in css for no padding:

.no_padding
{
	padding: none;
}

And there still is that padding. I don't know what is wrong there. Can you help me?

  • 2 Contributors
  • 3 Replies
  • 95 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

Short version: the problem was an invalid value for the padding property, so the browser ignored the rule and the earlier image padding stayed in effect. As discovered, replacing the invalid value with a zero length fixed it. was also on the right track about cascade and order — a later valid rule will win only if its specificity is not lower.

Why that happens: padding accepts lengths, percentages, the keyword inherit (and some newer keywords), but not the keyword none. When the parser sees an invalid value it drops that declaration and leaves whatever padding was previously applied. That is why the class on the image appeared to do nothing.

Quick debugging checklist useful for similar issues:

  • Inspect the element with your browser devtools and look at the Rules/Computed box model to see which selector and stylesheet line set the padding.
  • Confirm the fix is a valid value and that the selector’s specificity is high enough (or appears later) to override any generic img rule.
  • If another rule still wins, either increase selector specificity to target that image inside its wrapper, move the rule after the competing rule, or use !important only as a last resort.

Additional tips: frameworks like Bootstrap sometimes add spacing via utility or component classes (check for thumbnail-like classes). For layout control, consider applying spacing to a wrapper element rather than the img itself, and set images to block-level when you want to avoid inline spacing effects.

Recommended Answers

All 3 Replies

Member Avatar for danny4444

Is...

.no_padding
{
	padding: none;
}

put after...

img {
	padding: 8px;
	border:none;
}

I believe that the image will look at the last styles if there are multiple that apply to it. (don't quote me on that).

Apart from that. I would make a class for each maybe?

Cheers

Danny

Member Avatar for McLaren 
.no_padding
{
	padding: none;
}

Yeah, and it actually is the last in css file.

Apart from that. I would make a class for each maybe?

Didn't understand, can you tell more?

Member Avatar for McLaren

Have the solution - I had to write padding:0 instead of padding:none

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.