सीएसएस में प्रतिशत मार्जिन का उपयोग करना, लेकिन न्यूनतम मार्जिन पिक्सेल में चाहते हैं?

Question

मैंने margin: 0 33% 0 0; सेट किया है, हालांकि मैं यह भी सुनिश्चित करना चाहता हूं कि मार्जिन कम से कम एक निश्चित px राशि है। मुझे पता है कि सीएसएस में min-margin नहीं है इसलिए मैं सोच रहा था कि मेरे पास कोई विकल्प है या नहीं?

Answer 1

div को width और अपने तत्व के दाईं ओर एक स्थिर min-width रखें।

<div style="position:relative; float:left; margin:0"> 
<div style="position:relative; float:left; width:33%; min-width:200px"> 

Answer 2

इस बारे में कैसे?

body {margin-left: 60px; margin-right: 60px; } 
div#container {width:33%;} 

Answer 3

आप इस

.mm:before { 
    content: ""; 
    display: inline-block; 
    width: 33%; 
    min-width: 200px; 
} 

Answer 4

कार्ल Papworth, इस मामले में आप इस का उपयोग कर सकते कोशिश कर सकते हैं:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); } 
div#container {width:33%;} 

Answer 5

यहां सच्चे समाधान एक मीडिया क्वेरी को तोड़ने बिंदु का उपयोग करने के लिए है यह निर्धारित करने के लिए कि 33% अब आपके लिए काम नहीं करते हैं और न्यूनतम मार्जिन द्वारा पिक्सेल में ओवरराइड किया जाना चाहिए।

/*Margin by percentage:*/ 
div{ 
    margin: 0 33% 0 0; 
} 

/*Margin by pixel:*/ 
@media screen and (max-width: 200px){ 
    div{ 
     margin: 0 15px 0 0; 
    } 
} 

उपरोक्त कोड में, max-width जो कुछ स्क्रीन की चौड़ाई 33% सही मार्जिन नहीं रह गया है आप के लिए काम करता है के लिए बदल जाते हैं।

Answer 6

अगर आप span उपयोग कर रहे हैं की तुलना में यू इस तरह करना है:

span{ 
display:block; 
margin:auto; 
} 

working demo

अगर आप div उपयोग कर रहे हैं की तुलना में यू कर सकते हैं:

div{ 
    margin:auto; 
} 

Answer 7

मैंने उपर्युक्त समाधानों में से कुछ के साथ खेला जाता है, लेकिन तरल पदार्थ और वास्तव में उत्तरदायी सेटिंग में, मेरा मानना ​​है कि उचित पैडी सेट करना सबसे अच्छा विकल्प है संबंधित कंटेनर/रैपर पर एनजी। उदाहरण: शैली:

html { 
    background-color: #fff; 
    padding: 0 4em; 
} 
body { 
    margin: 0 auto; 
    max-width: 42em; 
    background-color: #ddf; 
} 

अब विभिन्न खिड़की चौड़ाई के साथ चारों ओर खेलते हैं, और भी विभिन्न फ़ॉन्ट आकार का प्रयास करें।

भी working demo आज़माएं।