4

form This is my form in html the blue one is the entire form and the orange one with red border is the excess margin of the form i wanted to remove this on i tried using

form{
margin:0;
padding:0;
}

This is approach is not the successful since the margin is still there. And the only way to remove this is excess margin is the margin of form. Any idea is appreciated.

Community
  • 1
  • 1
Brownman Revival
  • 3,620
  • 9
  • 31
  • 69

2 Answers2

3
form{
 margin:0px; padding:0px; display:inline;
}

My problem is solved after putting this css.

Komal K.
  • 450
  • 2
  • 13
2

It looks like you're using Chrome. The orange indicates that it's margin (padding would be green). Using the developer console, you can inspect the element to see all the styles that are applied to it. You probably have another rule somewhere with a higher specificity that is taking precedence over your general form rule.

If you click on the item in the Elements tab of the developer console, the styles will be listed in the right-hand panel. You will probably see your style there with a strikethrough through it, indicating that another rule is taking precedence over it. Find the other rule and take the appropriate action (either override it with a higher specificity or modify the rule that's in place).

I would avoid using !important unless you're sure it's the right solution for this issue. By the sounds of it, it's definitely not the right solution. See here or just Google "CSS avoid important" for reasons why it's not a good idea to jump right to !important as a solution. One big reason is because that makes it difficult to override that style if you need to later on.

See here for an explanation of CSS specificity (including !important and some rules of thumb on when and when not to use it).

Community
  • 1
  • 1
Travesty3
  • 14,351
  • 6
  • 61
  • 98
  • i see now. let me check this now and i will be back give me a few minute. – Brownman Revival Dec 19 '14 at 06:48
  • i think i see it now `form { margin-bottom: 1em; }` it says user agent stylesheet but when i look for this in my style i dont have anything like this.where can i find the user agent stylesheet – Brownman Revival Dec 19 '14 at 06:53
  • The user agent stylesheet is the default styles your browser uses. Sounds like your CSS rule isn't there on the page like you think it is. How are you including this CSS on the page? Inside a ` – Travesty3 Dec 19 '14 at 06:56
  • `` this is how i include it.I think it is included because all other style are applied like text color. This is the only problem i have the `margin-bottom:1em;` now i have a clear sight if the problem – Brownman Revival Dec 19 '14 at 06:59
  • what i did is to put this `style="margin-bottom: 0;"` directly in the form itself does this have a drawback this is not a good practice?but it is working – Brownman Revival Dec 19 '14 at 07:06
  • Are you sure that your path to your CSS file is correct? In the developer console, check your Network tab for a red file (meaning it couldn't be loaded) or your Console tab for a message indicating it couldn't load your CSS file. I tend to avoid using relative paths, and instead use paths starting from the document root, i.e. if your CSS folder is located directly under your document root, the path would be `/css/style.css`. That way you don't have to worry about where your current script lies in your project. – Travesty3 Dec 19 '14 at 07:10
  • 1
    You are correct that using inline styles is not a good practice. The method you're attempting to use (including via `` tag) is better, so I would try to get that to work. But if the user agent stylesheet's styles are still putting the margin on that form, then it sounds like your rule is somehow not included on the page. – Travesty3 Dec 19 '14 at 07:14
  • sorry i got busy with fixing the project.Since all the other style are working like text color i am assuming that the css file is correctly load and when i tried checking the network tab nothing was display so i am again assuming that i correctly included the css nonetheless i will try changing the file i want to make the project in best way i could i will try to make it run the way you suggested. – Brownman Revival Dec 19 '14 at 09:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67309/discussion-between-hogrider-and-travesty3). – Brownman Revival Dec 19 '14 at 09:59