Der obige Link zeigt ein Kontaktformular, das ich mache.
Ich versuche es wie das Bild rechts zu machen. Ich muss den Text "Probier uns heute" ein margin-top von 20px geben.
HTML:
%Vor%CSS:
%Vor% Das CSS sollte die .form_head 20px gegen die #form_body div gedrückt haben. Es ist jedoch nichts passiert. Ich habe sogar mit Firebug- und Chrome-Entwicklertools experimentiert, aber keine Ahnung, warum dies passiert. Ich habe auch versucht, die Höhe von #form_body div so einzustellen, dass sie der Höhe des Formulars entspricht, so dass Platz für den .form_head ist, der nach unten gedrückt wird, aber immer noch nicht funktioniert.
Ich habe jetzt seit drei Monaten programmiert und ich bin oft mit dieser Art von Problem konfrontiert. Ich hacke mich immer raus, indem ich einfach einige Positionierungscodes eingebe, um es zu erledigen.
Allerdings möchte ich heute nicht dasselbe tun, aber ich möchte verstehen, warum dies geschieht und wie man es richtig löst. Könnte jemand bitte etwas Licht geben und mich darüber aufklären?
<span> -Elemente haben eine Standardeigenschaft display von inline . inline -Elemente sind unter anderem nicht von Rändern oder Paddings betroffen.
Geben Sie einfach .form_head a display:block oder display:inline-block ein.
Mehr lesen:
Der Unterschied zwischen "Block" und "Inline" "
Was ist der Deal mit Display: Inline-Block?
Sie wenden diese CSS-Regel auf einen Bereich an. Ein Bereich ist ein Inline-Element. Ändern Sie es in ein Block-Level-Element wie ein Div oder fügen Sie display:block oder display:inline-block zu Ihrer CSS-Regel hinzu.
Sie müssen die Eigenschaft dispaly: block verwenden. Hier ist Ihr Code:
%Vor%Sie könnten es versuchen
%Vor% oder Sie könnten padding-top anstelle von margin-top eingeben, oder haben Sie top berücksichtigt?