सीएसएस मार्जिन टॉप

http://anonoz.com/armesh//contact_form/सीएसएस मार्जिन टॉप

काम नहीं कर ऊपर के लिंक एक संपर्क फ़ॉर्म है कि मैं बनाने रहा हूँ पता चलता है। मैं इसे दाईं ओर चित्र की तरह बनाने की कोशिश कर रहा हूं। मुझे 20px का margin-top "आज हमें आजमाएं" टेक्स्ट देना होगा।

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>

सीएसएस:

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

सीएसएस #form_body div के खिलाफ .form_head 20px नीचे धक्का दे दिया जाना चाहिए था। हालांकि कुछ भी नहीं हुआ। मैंने फायरबग और क्रोम डेवलपर टूल्स के साथ भी प्रयोग किया लेकिन मुझे कोई संकेत नहीं मिला कि यह क्यों हो रहा है। मैंने फॉर्म की ऊंचाई से मेल खाने के लिए #form_body div की ऊंचाई सेट करने का भी प्रयास किया है, इसलिए .form_head को धक्का दिया जा सकता है लेकिन यह अभी भी काम नहीं कर रहा है।

मैं अब 3 महीने के लिए कोडिंग कर रहा हूं और मुझे अक्सर इस प्रकार की समस्या का सामना करना पड़ता है। मैं हमेशा इसे करने के लिए कुछ पोजिशनिंग कोड में कुंजी डालकर अपना रास्ता निकाल देता हूं।

हालांकि, मैं आज भी ऐसा नहीं करना चाहता हूं, लेकिन यह समझना चाहता हूं कि यह क्यों हो रहा है और इसे उचित तरीके से कैसे हल किया जाए। क्या कोई कृपया कुछ प्रकाश डाला और मुझे इस पर शिक्षित कर सकता है?

स्रोत

2013-05-08 Armesh Singh

मैंने डिफ़ॉल्ट एच 1, एच 2 ... स्टाइल को रोकने के लिए इसे एक अवधि में रखा। मैं हमेशा इसे करने के लिए स्थिति विधियों का उपयोग करता हूं, लेकिन यह मेरे माध्यम से हैकिंग की तरह है। क्या कोई और तरीका है? सबसे महत्वपूर्ण बात यह है कि मैं जानना चाहता हूं कि यह क्यों हो रहा है? –

संभावित डुप्लिकेट [यह सीएसएस मार्जिन-टॉप शैली क्यों काम नहीं करती है?] (Http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) –

<span> तत्वों के पास inline की डिफ़ॉल्ट display संपत्ति है। अन्य चीजों के साथ inline तत्व मार्जिन या पैडिंग से प्रभावित नहीं होते हैं।

बस .form_headdisplay:block या display:inline-block दें।

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

अधिक पढ़ने: ब्लॉक संपत्ति:
The difference between "block" and "inline"
What’s the Deal With Display: Inline-Block?

स्रोत

2013-05-08 08:02:30 Jace

मैंने कभी इस तथ्य को नहीं पहचाना है कि इनलाइन तत्व प्रभावित नहीं हैं –

@ आर्मेशसिंह येप, 'इनलाइन-ब्लॉक' संपत्ति भी है, जो 'इनलाइन' और' ब्लॉक 'के बीच मिश्रण है। तत्व प्रकार 'इनलाइन' तत्व की तरह व्यवहार करता है, लेकिन आप इसकी चौड़ाई, ऊंचाई, मार्जिन और पैडिंग को संशोधित कर सकते हैं। मैंने 'इनलाइन-ब्लॉक' के बारे में कुछ जानकारी के लिए एक और लिंक के साथ अपना जवाब अपडेट किया। – Jace

आप उस सीएसएस नियम को एक अवधि में लागू कर रहे हैं। एक अवधि एक इनलाइन तत्व है। इसे एक ब्लॉक स्तर तत्व में बदलें जैसे div या display:block या display:inline-block को अपने सीएसएस नियम में जोड़ें।

स्रोत

2013-05-08 08:01:58 JMWhittaker

वाह , अब यह काम कर रहा है। धन्यवाद। लेकिन क्या आप मुझे समझा सकते हैं कि क्यों इनलाइन तत्व इस तरह से व्यवहार करता है? –

@ अरमेशसिंह मेरे पास मेरे उत्तर में और पढ़ने के लिए एक लिंक है। – Jace

धन्यवाद जैस मैं इसे पढ़ूंगा। –

आप dispaly उपयोग करना होगा।

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

स्रोत

2013-05-08 08:04:02

आप

display:block;

की कोशिश कर सकते हैं या आप margin-top के बजाय padding-top कर सकता है, या आप top पर विचार किया है: अपने कोड है?

स्रोत

2013-05-08 12:54:42 internetgho5t

सीएसएस मार्जिन टॉप

उत्तर

संबंधित मुद्दे