Big white space in a form. On top of it

Question

I'm getting this big white space in the content (checked with chrome devTool) of a form in my jsp. I did try to change the margin and padding to 0px but nothing changes. I have 3 submits, that are well placed, except there is a space between the buttons and the margin of the form (top). I guess it may be bothering the fact that I have 2 include directives, to call a header and a menu. Like this:

<%@ include file = "PaginaPpal.html" %>
<%@ include file = "Menu.html"%>

<div id = "contenedor" >
    <form action ="abmNadador" method ="post">
        <input class = "botones" type = "submit" value="Nuevo Nadador"> 
        <input class = "botones" type = "submit" value="Editar Nadador"> 
        <input class = "botones" type = "submit" value="Eliminar Nadador"> 
    </form>
</div>

I don't know what else to change in my css, and dunno how to make it work with those include deirectives.

This is the css:

#contenedor 
{
position: relative;
top: 100px;
left: 330px;
border: 3px solid #73AD21;
width: 75.5%;
}

(I did not modified the margins in my inputs, it should not be collapsing)

.botones {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;}

Have you tried? `*{margin:0; padding:0;}` in top of all the css. to remove default margin and padding. — ketan, Mar 01 '16 at 04:56

xzegga · Answer 1 · 2016-03-01T05:18:17.670

1

By default body have a value for margin and padding, you can remove this setting this two properties to 0.

html, body, form {
   margin: 0;
   padding: 0;
}

Form elements have a default display property of inline. inline elements are not affected by margins or paddings, amongst other things.

form {
   display: block;
}

Additionally is good reset all properties when start a project using some css reset libraries like CSS Reset of Erick Meyer

edited Mar 01 '16 at 05:18

answered Mar 01 '16 at 04:58

xzegga

3,051
3
25
45

I already tried and didn't work – Juan Grasso Mar 01 '16 at 05:05
Do you have a url demo for you app, or have a print screen of your problem? – xzegga Mar 01 '16 at 05:06
[link](http://puu.sh/nqzWm/104943d968.png) that big white space is the problem – Juan Grasso Mar 01 '16 at 05:12
Prease press right click on the white space and select inspect and print screen the result of google inspector. – xzegga Mar 01 '16 at 05:14
[link](http://puu.sh/nqAdq/0746ab8e68.png) there – Juan Grasso Mar 01 '16 at 05:17
check the modified answer above – xzegga Mar 01 '16 at 05:18

Big white space in a form. On top of it

1 Answers1