-1

I have one problem regarding css. i have create a html page and added some padding and margin property in inline css it's working but when i add the same in my external css it's not working

This is my inline coding <div class="container-fluid" style="margin-right:-15px; padding:0px;">

And this is the class in external css

.no-margin{margin-right:-15px; padding:0px;}
Mathur
  • 17
  • 5
  • How do you adding class to your divs? Please write your usage style. – kkakkurt Jun 08 '16 at 12:02
  • Check using inspect element, this class might be overwritten with some other styles.. – Mohammad Usman Jun 08 '16 at 12:02
  • Add a fiddle or atleast some code so that we can test.. – Tirthraj Barot Jun 08 '16 at 12:02
  • i add the add in div like this
    – Mathur Jun 08 '16 at 12:07
  • How are you linking the CSS Sheet? is the path correct? – Paulie_D Jun 08 '16 at 12:09
  • yes it is correct, other classes are working well – Mathur Jun 08 '16 at 12:10
  • container-fluid probably has other styles already for margin and padding that are overriding yours. Try being more specific with your selector in your external CSS: div.container-fluid.no-margin {margin-right:-15px; padding:0px;} also, for what it's worth, a class name of 'no-margin' may not be the best choice if it's margin-right is -15px; ...it will work, but if someone else has to update/maintain the code, it might be better to call it something else, like 'move-right-15' – ryantdecker Jun 08 '16 at 12:36

3 Answers3

2

Try this: External CSS: 

.no-margin{margin-right:-15px; padding:0px;}

Inline coding:

<div class="container-fluid no-margin">
Deep Shah
  • 310
  • 1
  • 6
0

this will should work:

<div class="container-fluid no-margin">

in css:

.no-margin{margin-right:-15px; padding:0px;}
kkakkurt
  • 2,790
  • 1
  • 30
  • 33
Rubén Amaro
  • 64
  • 6
  • if you would like to override inline content you have to add !important to every declaration: .no-margin{margin-right:-15px !important; padding:0px !important;} – Rubén Amaro Jun 08 '16 at 12:14
  • using '!important' here is sort of like using a sledge hammer to hang a picture...you do need a hammer (more specific CSS) but '!important' is likely to cause more trouble. In a case like this where you have conflicting styles in your CSS, you should try: 1) update or remove the original style if you can (if you don't need it anymore and it's not part of an included library like bootstrap) 2) use a different class name (if the one that's conflicting can't be changed, maybe you shouldn't be using it in this case) or 3) use more specific selectors (multiple classes or an id). – ryantdecker Jun 08 '16 at 12:52
  • I know it, it is a basic example. I am only explaining him differents way to do that :) – Rubén Amaro Jun 08 '16 at 12:53
0

@Mathur never use !important it is very bad practice also do not write inline CSS because later on if you have to change something dynamically you will be having hard times. Also remember that inline css is overwriting your styles. Always write your code in external file :).

Read more info about !important here

Community
  • 1
  • 1
thedivkiller
  • 81
  • 1
  • 7
  • thanks for reply and nice suggestion. i always use external css but sometime i use internal for testing purpose only. And this time external css not working without !important so any other option to solve this problem – Mathur Jun 08 '16 at 12:39
  • yes you are able to solve your problem by learning more about CSS Specificity and how it is working by using MDN or there are a lot of free tutorials out there. If i have time I will give you a hand later today. – thedivkiller Jun 08 '16 at 12:45
  • Thanks for that but i have faces one another problem right now regarding display of page – Mathur Jun 08 '16 at 12:50
  • What kind a problem ? Give us more specific info. – thedivkiller Jun 08 '16 at 13:03
  • can you share your skype id if possible? – Mathur Jun 08 '16 at 13:04
  • mladen0f. I am on work right now I will be able to help you in the evening. – thedivkiller Jun 08 '16 at 13:05