Geek Answers Handbook

Why does setting a field on a div not affect the position of child content?

I would like to understand a little how css fields work with div and child content.

If I try this ...

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

... the "Save" button is located directly opposite the user role (margin failure):

Margin Fail :( http://img697.imageshack.us/img697/8459/nomargin.jpg

If I changed it to this ...

<div style="clear: both;">
    <input style="margin-top: 2em;" type="submit" value="Save" />
</div>

... there is a gap between the "Save" and "User Role" buttons (winning margin):

Margin Win :) http://img20.imageshack.us/img20/1973/yesmargin.jpg

Questions:

Can someone explain what I'm watching? Why not margin divto bring inputdown? Why should I put margin on input? There must be some fundamental css law that I don't understand.

+5
4

, div , " ". , select, div, . , , . div float, .. , , 2em- , "". -, , .

submit, , , div.

+4

. , - ? . , padding? :

<div style="clear: both; padding-top: 2em;">
  <input type="submit" value="Save" />
</div>

. :

CSS box model

, , , . :

<div>one</div>
<div>two</div>

:

div { margin: 1em; }

2em. . 8.3.1 :

:

  • block . . , . , . . , , .

, , , , , div, (), , div.

, , , .

+3

, , .

, tbe, . , , .

0

DIV. DIV , . . :

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

. , . :

<div style="clear: both; margin-top: 2em;">
    <input type="submit" value="Save" />
</div>

Now you set the marker of the children. This will have a different result. Setting this child does not affect the parent (DIV).

0
source

More articles:


All Articles