2013-05-08 35 views
7

http://anonoz.com/armesh//contact_form/CSS margin-top không hoạt động

Liên kết ở trên hiển thị biểu mẫu liên hệ mà tôi đang tạo. Tôi đang cố gắng làm cho nó giống như hình ảnh ở bên phải. Tôi phải cung cấp cho văn bản "Hãy thử chúng tôi hôm nay" một margin-top của 20px.

HTML:

<body> 

<div id="form_container"> 
    <div id="form_body"> 
     **<span class="form_head">Try us Today</span>** 
     <br/> 
     <span class="form_subhead">30 day money back gurantee</span> 
       <form id="enquiry_form" method="post" action="scripts/contact-form-handler.php"> 

         <input type="text" name="name" id="name" value="Name" /> 

         <input type="text" name="contact" id="contact" value="Contact Number" /> 

         <input type="text" name="e-mail" id="email" value="Email" /> 

         <input id='submit_button' type="submit" value="Get Your Space - NOW" /> 
       </form> 
    </div>  
</div> 

<img src="form2.jpg"/> 
</body> 

CSS:

.form_head { 
    margin-top: 20px; 
    color:#58585a; 
    font-size:22px; 
} 

CSS nên đã đẩy .form_head 20px xuống so với #form_body div. Tuy nhiên không có gì xảy ra. Tôi thậm chí đã thử nghiệm với các công cụ phát triển Firebug và Chrome nhưng không nhận được một đầu mối tại sao điều này lại xảy ra. Tôi cũng đã cố gắng thiết lập chiều cao của #form_body div để phù hợp với chiều cao của biểu mẫu để có chỗ cho .form_head được đẩy xuống nhưng nó vẫn không hoạt động.

Tôi đã được mã hóa trong 3 tháng và tôi thường phải đối mặt với loại vấn đề này. Tôi luôn luôn hack theo cách của tôi bằng cách đơn giản là keying trong một số mã định vị để làm cho nó được thực hiện.

Tuy nhiên, tôi không muốn làm điều tương tự ngày hôm nay, nhưng muốn hiểu tại sao điều này lại xảy ra và cách giải quyết nó theo cách thích hợp. Ai đó có thể vui lòng làm sáng tỏ và dạy tôi về điều này?

+0

Tôi đặt nó trong một khoảng để ngăn chặn kiểu dáng h1, h2 ... mặc định. Tôi luôn luôn sử dụng các phương pháp vị trí để hoàn thành nó, nhưng điều đó giống như việc hack thông qua tôi. Còn cách nào khác không? Quan trọng nhất, tôi muốn biết tại sao nó lại xảy ra? –

+0

Bản sao có thể có của [Tại sao kiểu CSS-margin này không hoạt động?] (Http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) –

Trả lời

16

<span> yếu tố có thuộc tính display mặc định là inline. inline các yếu tố không bị ảnh hưởng bởi lề hoặc paddings, trong số những thứ khác.

Chỉ cần cung cấp .form_head a display:block hoặc display:inline-block.

.form_head { 
    margin-top: 20px; 
    color:#58585a; 
    font-size:22px; 
    display:block; /* Add this */ 
} 

More đọc:
The difference between "block" and "inline"
What’s the Deal With Display: Inline-Block?

+0

Tôi chưa bao giờ biết thực tế rằng các phần tử nội tuyến không bị ảnh hưởng –

+0

@ArmeshSingh Yep, cũng có thuộc tính 'inline-block', đó là loại hỗn hợp giữa' inline' và 'block'. Loại phần tử hoạt động giống như phần tử 'inline', nhưng bạn có thể sửa đổi chiều rộng, chiều cao, lề và phần đệm của nó. Tôi đã cập nhật câu trả lời của mình bằng một liên kết khác đến một số thông tin về 'inline-block'. – Jace

1

Bạn đang áp dụng quy tắc CSS đó cho một khoảng. Một span là một phần tử inline. Thay đổi thành phần tử cấp khối như div hoặc thêm display:block hoặc display:inline-block vào quy tắc CSS của bạn.

+0

Wow , bây giờ nó đang hoạt động. Cảm ơn bạn. Nhưng bạn có thể giải thích cho tôi tại sao yếu tố nội tuyến hoạt động theo cách đó? –

+0

@ArmeshSingh Tôi có một liên kết để đọc thêm trong câu trả lời của tôi. – Jace

+0

Cảm ơn Jace Tôi đã đọc nó. –

1

bạn phải sử dụng các dispaly: sở hữu khối. Đây là mã của bạn:

.form_head { 
    display:block; 
    margin-top: 20px; 
    color:#58585a; 
    font-size:22px; 
} 
1

Bạn có thể thử

display:block; 

hoặc bạn có thể làm padding-top Thay vì margin-top, hoặc có bạn xem top?

Các vấn đề liên quan