CSS controlling the Form padding



Programming Help Forums
Home       Members    Calendar    Who's On
Welcome Guest ( Login | Register )
        



CSS controlling the Form padding Expand / Collapse
Author
Message
Posted 12/7/2007 10:15:15 AM
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

Group: Administrators
Last Login: 3/24/2008 5:03:47 PM
Posts: 79, Visits: 295
I always had a problem formatting forms when working in tight spaces. Ugghh. They never do what I want.

That is until I discovered they have inherent padding. It's there. You never see it and you can't control it with regular HTML (at least none that I could find). Most browser suppress the top margin, but not the bottom.

Alas, CSS saved me from my torment. It was easy to change the background and border colors, but changing the padding or margins helped enormously. What control!

form {
 border: 1px solid #666699;
 padding: 5px;
}

I put a border around this form just to see how the padding affects everything. When you have the padding set right, remove the border.

Or remove the bottom border with an in-line style.

<form style="margin-bottom:0;" action="">
<input type="submit" value="Send">
</form>

You can also manipulate the margins. Much better moving the form around like this (recommend external style sheet).

.Textbox {
margin-left: 100px;
}

wingMan

Post #1515
Posted 8/15/2008 8:16:15 AM
Admin

AdminAdminAdminAdminAdminAdminAdminAdmin

Group: Administrators
Last Login: 10/13/2010 9:32:56 AM
Posts: 165, Visits: 333
Margins and Padding do make some HTML elements harder to work with, but CSS is a great way to control them. Sometimes, I like to set all elements' margin and padding to 0 and then redefine them myself.

EDIT: This is another reason why the Developer Toolbars are of great use. No need to set borders around elements to see where your padding is at - just enable the toolbar and hover your mouse over it. It will show you the current margin and padding, as well as the CSS code that is affecting it - makes things a lot easier.
Post #1888
Posted 8/20/2008 1:51:54 PM
Admin

AdminAdminAdminAdminAdminAdminAdminAdmin

Group: Administrators
Last Login: 10/20/2011 4:56:10 PM
Posts: 143, Visits: 352
Yeah, watch out for margins/padding on <.p>s and <.ul>/<.li>'s too. I like to set those to zero in the beginning so I can then define my own afterwards.
Post #1899
« Prev Topic | Next Topic »


Reading This Topic Expand / Collapse
Active Users: 0 (0 guests, 0 members, 0 anonymous members)
No members currently viewing this topic.
Forum Moderators: ProgrammingHelp, Viral Unity, Matt.Hill, DaveL, Alex.D

Permissions Expand / Collapse

All times are GMT -5:00, Time now is 9:17am

Powered By InstantForum.NET v4.1.4 © 2012
Execution: 0.296. 18 queries. Compression Disabled.