html - mdn - www mozilla developer network




كيف أقوم بإزالة المسافة بين عناصر block-block؟ (20)

مع هذا HTML و CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

ونتيجة لذلك ، ستكون هناك مساحة عرضية تبلغ 4 بكسل بين عناصر SPAN.

العرض التوضيحي: http://jsfiddle.net/dGHFV/

أتفهم سبب حدوث ذلك ، وأعرف أيضًا أنه يمكنني التخلص من هذه المساحة عن طريق إزالة المسافة البيضاء بين عناصر SPAN في شفرة مصدر HTML ، مثل:

<p>
    <span> Foo </span><span> Bar </span>
</p>

ومع ذلك ، كنت أتطلع إلى حل CSS لا يتطلب التلاعب برمز مصدر HTML.

أعرف كيفية حل ذلك باستخدام JavaScript - عن طريق إزالة العقد النصية من عنصر الحاوية (الفقرة) ، مثل:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

العرض التوضيحي: http://jsfiddle.net/dGHFV/1/

ولكن هل يمكن حل هذه المشكلة مع CSS وحده؟


FONT-SIZE: 0؛ يمكن أن يكون أصعب قليلا لإدارة ...

أعتقد أن الخطوط الزوجية التالية أفضل بكثير وأكثر قابلية لإعادة الاستخدام ، وأكثر من أي وسيلة أخرى. أنا شخصيا استخدم هذا:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

ثم يمكنك استخدامه على النحو التالي ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

بقدر ما أنا أعرف (قد أكون مخطئا) ولكن جميع المتصفحات تدعم هذه الطريقة.

شرح :

يعمل هذا (ربما يكون -3 بيكسل أفضل) تمامًا كما تتوقع أن تعمل.

  • قمت بنسخ ولصق الكود (مرة واحدة)
  • ثم على html الخاص بك فقط استخدام class="items" على الأصل لكل كتلة مضمنة.

لن تحتاج إلى الرجوع إلى css وإضافة قاعدة css أخرى ، لمجموعاتك الجديدة المضمنة.

حل مشكلتين في وقت واحد.

لاحظ أيضًا أن علامة > (أكبر من علامة) تعني أن * / يجب أن يكون جميع الأطفال محجوبين داخل السطر.

http://jsfiddle.net/fD5u3/

ملاحظة: لقد تم تعديلها لتتوافق على توارث حروف - حروف عند تضمين برنامج تضمين التابع.


أضف white-space: nowrap إلى عنصر الحاوية:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

هنا هو Plunker .


أعتقد أن هناك طريقة بسيطة جدًا / قديمة لهذا تدعمها جميع المتصفحات حتى IE 6/7. يمكننا ببساطة تعيين letter-spacing إلى قيمة سالبة كبيرة في الأصل ثم تعيينها إلى normal في العناصر الفرعية:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


إحدى الطرق الأخرى التي وجدتها هي تطبيق الهامش الأيسر كقيم سالبة باستثناء العنصر الأول من الصف.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

استخدم flexbox وقم بإعداد احتياطي (من الاقتراحات أعلاه) للمتصفحات القديمة:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}


بشكل عام ، نستخدم عناصر مثل هذه في أسطر مختلفة ، ولكن في حالة display:inline-block سيؤدي display:inline-block باستخدام العلامات في نفس السطر إلى إزالة المساحة ، ولكن في سطر مختلف لن يحدث ذلك.

مثال مع العلامات في سطر مختلف:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

مثال مع العلامات في نفس السطر

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>

طريقة أخرى فعالة هي مهمة CSS تستخدم font-size:0 إلى العنصر الأصل وتعطي font-size لعنصر تابع بقدر ما تريد.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

قد لا تعمل الأساليب المذكورة أعلاه في مكان ما اعتمادًا على التطبيق بأكمله ، ولكن الطريقة الأخيرة هي حل مضمون لهذا الموقف ويمكن استخدامه في أي مكان.


بما أن هذه الإجابة أصبحت شائعة ، فأنا أعيد كتابتها بشكل كبير.

دعونا لا ننسى السؤال الفعلي الذي تم طرحه:

كيفية إزالة المسافة بين عناصر block-in-block ؟ كنت اتمنى حل CSS لا يتطلب التلاعب برمز مصدر HTML. هل يمكن حل هذه المشكلة مع CSS وحده؟

من الممكن حل هذه المشكلة مع CSS فقط ، ولكن لا توجد إصلاحات CSS قوية تمامًا .

كان الحل الذي كان لدي في إجابتي الأولية هو إضافة font-size: 0 إلى العنصر الأصل ، ثم إعلان font-size معقول على الأطفال.

http://jsfiddle.net/thirtydot/dGHFV/1361/

هذا يعمل في الإصدارات الأخيرة من جميع المتصفحات الحديثة. يعمل في IE8. لا يعمل في سفاري 5 ، لكنه يعمل في سفاري 6. سفاري 5 هو تقريبا متصفح ميت ( 0.33 ٪ ، أغسطس 2015 ).

ليست معقدة معظم القضايا الممكنة مع أحجام الخطوط النسبية لإصلاح.

ومع ذلك ، في حين أن هذا هو الحل المعقول إذا كنت بحاجة إلى إصلاح CSS فقط ، فليس هذا ما أوصي به إذا كنت حرًا في تغيير HTML (كما هو الحال في معظمنا).

هذا ما أقوم به ، بصفتي مطور ويب ذو خبرة كبيرة ، فعلاً لحل هذه المشكلة:

<p>
    <span>Foo</span><span>Bar</span>
</p>

نعم هذا صحيح. أزيل المساحة البيضاء في HTML بين عناصر الحظر المضمنة.

من السهل. انه سهل. وهو يعمل في كل مكان. إنه الحل البراغماتي.

عليك في بعض الأحيان أن تفكر بعناية في المكان الذي ستأتي منه المسافة البيضاء. هل سيتم إضافة عنصر آخر باستخدام جافا سكريبت لإضافة مسافة بيضاء؟ لا ، ليس إذا فعلت ذلك بشكل صحيح.

دعنا نذهب في رحلة سحرية بطرق مختلفة لإزالة المساحة البيضاء ، مع بعض HTML الجديد:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • يمكنك القيام بذلك ، كما أفعل عادة:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>
    

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • أو هذا:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • أو استخدم التعليقات:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • أو يمكنك تخطي certain علامات الإغلاق تمامًا (جميع المتصفحات على ما يرام مع هذا):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    

الآن وقد ذهبت و مللتك حتى الموت "بألف طريقة مختلفة لإزالة مسافة بيضاء ، من خلال ثلاثين" ، آمل أن تكون قد نسيت كل شيء عن font-size: 0 .

بدلاً من ذلك ، يمكنك الآن استخدام flexbox لتحقيق العديد من التنسيقات التي سبق لك استخدامها في الممرات المضمنة من أجل: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


جميع تقنيات القضاء على الفضاء display:inline-block هي الخارقة سيئة ...

استخدم Flexbox

إنه رائع ، يحل كل هذا bs تخطيط كتلة مضمنة ، واعتبارا من عام 2017 لديه دعم المتصفح 98 ٪ (أكثر إذا كنت لا تهتم IEs القديمة).


حسنًا ، على الرغم من أنني قمت بالاختصار لكل font-size: 0; ولم not implemented CSS3 feature إجابات not implemented CSS3 feature ، بعد أن اكتشفت أن أيا منها ليس حلا حقيقيا .

في الواقع ، ليس هناك حل واحد دون آثار جانبية قوية.

بعد ذلك قررت إزالة المسافات (هذه الإجابات حول هذه الوسيطة) بين أقسام div inline-block in inline-block من مصدر HTML بي ( JSP ) ، مما يؤدي إلى تحويل هذا:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

الى هذا

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

هذا قبيح ، ولكن العمل.

ولكن ، انتظر لحظة ... ماذا لو كنت أقوم بتوليد Taglibs loops داخل Taglibs loops ( Struts2 ، JSTL ، الخ ...)؟

فمثلا:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

من غير المعقول بالتأكيد أن نضع كل هذه الأشياء ، فهذا يعني

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

التي لا يمكن قراءتها ، من الصعب أن mantain وفهم ، الخ ...

الحل الذي وجدته:

استخدام تعليقات HTML لتوصيل نهاية div واحدة لبداية التالي!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

بهذه الطريقة سيكون لديك رمز مقروء و مزعج بشكل صحيح.

وباعتباره أحد الآثار الجانبية الإيجابية ، فإن HTML source ، على الرغم من أنه يتم نشره من خلال التعليقات الفارغة ، سينتج بشكل صحيح ؛

دعونا نأخذ المثال الأول ، imho هذا:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

أفضل من هذا

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

امل ان يساعد...


سوف أتوسع في الإجابة على user5609829 قليلاً كما أعتقد أن الحلول الأخرى هنا معقدة للغاية / الكثير من العمل. يؤدي تطبيق margin-right: -4px إلى عناصر الحظر المضمنة إلى إزالة المسافات ويدعمها جميع المتصفحات. انظر الكمان المحدث here . لأولئك المهتمين باستخدام هوامش سالبة ، حاول إعطاء this القراءة.


على الرغم من ذلك ، ليس من الناحية الفنية إجابة على السؤال: "كيف يمكنني إزالة المسافة بين عناصر block-in-block؟"

يمكنك تجربة حل Flexbox وتطبيق الشفرة أدناه وستتم إزالة المساحة.

p {
   display: flex;
   flex-direction: row;
}

يمكنك معرفة المزيد عن ذلك على هذا الرابط: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


لست متأكدًا تمامًا مما إذا كنت تريد إنشاء فترتين أزرقتين بدون فجوة أو ترغب في التعامل مع مساحة بيضاء أخرى ، ولكن إذا كنت تريد إزالة الفجوة:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

وقمت


لسوء الحظ ، إنه عام 2015 وما زال white-space-collapse غير مطبق.

في غضون ذلك ، اعط العنصر الرئيسي font-size: 0; وتعيين font-size على الأطفال. هذا ينبغي أن تفعل خدعة


لقد وجدت حل CSS خالصًا يعمل جيدًا جدًا في جميع المتصفحات:

span {
    display: table-cell;
}

للمتعة فقط: حل سهل جافا سكريبت.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>


هذه هي نفس الإجابة التي قدمتها في ما يتعلق بالموضوع: Display: Inline block - ما هو هذا الفضاء؟

هناك في الواقع طريقة بسيطة لإزالة المسافات البيضاء من كتلة مضمنة وهذا سهل ودلالي. يطلق عليه خطًا مخصصًا يحتوي على مسافات صفرية العرض ، والتي تتيح لك إمكانية تصغير المساحة البيضاء (التي يضيفها المتصفح للعناصر المضمنة عندما تكون في أسطر منفصلة) على مستوى الخط باستخدام خط صغير جدًا. بمجرد أن تعلن الخط ، يمكنك فقط تغيير font-family على الحاوية والعودة مرة أخرى على الأطفال ، وفويلا. مثله:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

تناسب الذوق. هنا تحميل على الخط أنا فقط المطبوخة في صياغة الخط وتحويلها مع مولد webfont FontSquirrel. استغرقني كل 5 دقائق. يتم تضمين إعلان css @font-face : خط مسافة فارغة من الصفر . إنه في Google Drive لذا ستحتاج إلى النقر فوق ملف> تنزيل لحفظه على جهاز الكمبيوتر الخاص بك. ربما ستحتاج إلى تغيير مسارات الخطوط أيضًا إذا قمت بنسخ الإعلان إلى ملف css الرئيسي الخاص بك.


هناك حل سهل في CSS. فمثلا:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

في رأيي كتابة font-size: 0 ليست آمنة عند استخدامه في مشروع مثل م ، لذلك أنا أفضل حل purecss.

يمكنك التحقق من هذا الإطار في هذا الرابط purecss . استمتع :)

.row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}
<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>


يبدو أن كل سؤال ، يحاول إزالة المسافة بين s inline-block بـ <table> بالنسبة لي ...

جرّب شيئًا كهذا:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


تحدد مواصفات CSS Text Module Level 4 خاصية خاصية text-space-collapse ، والتي تسمح بالتحكم في كيفية معالجة المساحة البيضاء داخل وعنصر ما.

لذا ، فيما يتعلق بمثالك ، عليك فقط كتابة هذا:

p {
  text-space-collapse: discard;
}

للأسف ، لا يوجد متصفح يقوم بتطبيق هذه الخاصية بعد (اعتبارًا من سبتمبر 2016) كما هو مذكور في التعليقات على إجابة HBP .





css