Why Isn’t My CSS Margin Working on a Div in Django?

By
Aaron Garnes
-
0
27
Asked By PixelPanda42 On

I have a Django form rendered in an HTML template, and I'm using `

` elements to wrap each form field and its label. I've given these `

` elements a class called "field-item" and I'm trying to set a margin-bottom of 100px in my CSS to see if it applies. However, it seems like the margin isn't changing at all. When I wrap the contents in a `

` tag with the same class, the margin works fine. Is there something wrong with using `

` for this purpose? Here's a look at my HTML code:

{{ form.name.label }}
{{ form.name }}
{{ form.description.label }}
{{ form.description }}

And here's my CSS:

.field-item {
margin-bottom: 100;
}

What could be going wrong?

3 Answers

Answered By DevGuru303 On

Also, keep in mind that the HTML snippet you shared has repeated parts for the same form fields, which doesn't affect margins but could lead to confusion later on. Make sure to clean that up. And just always check your CSS for any other possible syntax issues.

Answered By DesignDude88 On

You’re on the right track! Just to reiterate, CSS works perfectly fine with `

` tags. The core issue is that your `margin-bottom` property is invalid due to missing a unit. After adding `px` (resulting in `margin-bottom: 100px;`), it should function as expected. The reason it seemed to work with `

` tags is that browsers apply default margins to those. You might want to double-check the updated CSS again and clear your browser cache just to ensure the changes load properly.

Answered By CSSWhiz789 On

It looks like the problem is that you're missing a unit in your CSS rule. Instead of just `margin-bottom: 100;`, it should be `margin-bottom: 100px;`. Without a unit, browsers simply ignore your margin settings. Once you fix that, your margins should show up as expected on those `

` elements. Remember that `

` elements fully support margins, so that's not the issue here! Check out more about it on MDN if you want to dive deeper.

TechieTina -

Thanks for clarifying! I added 'px' to the margin-bottom but I didn't see any changes in the rendered HTML. Any thoughts on why?

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.