CODEWITHSUNDEEP
htmlcss
Richard
Richard

Reputation: 8935

CSS margin not being applied as expected

I have the following:

enter image description here

As you can see, the Avatar has a width wider than I want. I have tried setting the margin-right and the width, but neither seem to work.

Question

How do I reduce the width of the column?

Upvotes: 0

Views: 108

Answers (3)

Deepak Yadav
Deepak Yadav

Reputation: 7069

What you are seeing is padding not margin. That element does not has any given margin. The green color you see on browser is padding.

.col.col-person-avtar {
 padding-right: 0;
}

if you check see the code, col class already has margin:0 given, hence there is no margin

If that does not work, try giving it !important;

.col-person-avtar {
 padding-right: 0 !important;
}

And still if this does not meet your requirements try this below code.

.col-person-avtar {
 width: calc(100% - 15px) !important;
}

this 15px can be altered to whatever value you want, try modifying it till you get the desired output.

Upvotes: 1

Shawn Samuel
Shawn Samuel

Reputation: 1

If it's the excess space in the blue area you want to remove then you will have to reduce the width of the previous div or removing width:100% from .col should do the trick.

If you want to remove the space in the green area then remove padding. :)

Upvotes: 0

Unknown_Coder
Unknown_Coder

Reputation: 774

Replace 

.col-person-avatar {
    padding-top: 0px;
    margin-right: 0px;
}

To

.col-person-avatar {
    padding-top: 0px;
    margin-right: 0px !important;
}

here, !important will overwrite existing classes which is available somewhere in your project. Thank you!

Upvotes: 0

Related Questions