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




elements mozilla (25)

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/

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

مع هذا 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 وحده؟


بشكل عام ، نستخدم عناصر مثل هذه في أسطر مختلفة ، ولكن في حالة 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>

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


هذه هي نفس الإجابة التي قدمتها في ما يتعلق بالموضوع: 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 الرئيسي الخاص بك.


جربت font-size: 0 حل لمشكلة مماثلة في React and Sass لمشروع مخيم Code Free الذي أعمل فيه حاليًا.

ويعمل!

أولا ، البرنامج النصي:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

ثم ، ساس:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

بسيط:

item {
  display: inline-block;
  margin-right: -0.25em;
}

ليست هناك حاجة للمس العنصر الرئيسي.

الشرط الوحيد هنا: يجب ألا يتم تحديد حجم خط العنصر (يجب أن يكون مساوياً لحجم خط الوالدين).

0.25em هو word-spacing الافتراضي word-spacing

W3Schools - خاصية تباعد الكلمات


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

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

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

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


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

span {
    display: table-cell;
}

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

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

أضف 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 .


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

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

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

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>


يبدو أن كل سؤال ، يحاول إزالة المسافة بين 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. فمثلا:

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>


واجهت هذه المشكلة الآن ومن font-size:0; لقد وجدت أن في Internet Explorer 7 تبقى المشكلة لأن Internet Explorer يفكر "حجم الخط 0؟!؟!! WTF أنت رجل مجنون؟" - إذن ، في حالتي ، أعدت إعادة تعيين CSS لـ Eric Meyer font-size:0.01em; لدي اختلاف في 1 بكسل من Internet Explorer 7 إلى Firefox 9 ، لذلك ، أعتقد أن هذا يمكن أن يكون حلاً.


مع أقواس PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


أعتقد أن هناك طريقة بسيطة جدًا / قديمة لهذا تدعمها جميع المتصفحات حتى 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>


قم بإزالة المسافات من عناصر الحظر المضمنة. هناك العديد من الطرق:

  1. الهامش السلبي

    div a {
        display: inline - block;
        margin - right: -4 px;
    }
    
  2. حجم الخط إلى الصفر

    nav {
        font - size: 0;
    }
    nav a {
        font - size: 16 px;
    }
    
  3. تخطي علامة الإغلاق

    < ul >
        < li > one
        < li > two
        < li > three
    < /ul>
    

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

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

p {
  text-space-collapse: discard;
}

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


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

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

    float: left;
}

وقمت


p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


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

استخدم Flexbox

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



إضافة display: flex; إلى العنصر الأصل. هنا هو الحل مع البادئة:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


خياران آخران يستندان إلى CSS Text Module Level 3 (بدلاً من white-space-collapsing:discard الذي تم إسقاطه من مسودة المواصفات):

  • word-spacing: -100%;

من الناحية النظرية ، يجب أن تفعل بالضبط ما هو مطلوب - تقصير المسافات البيضاء بين "الكلمات" بنسبة 100 ٪ من عرض حرف الفضاء ، أي إلى الصفر. ولكن يبدو أنه لا يعمل في أي مكان ، للأسف ، وهذه الميزة تتميز بأنها "معرضة للخطر" (يمكن إسقاطها من المواصفات أيضًا).

  • word-spacing: -1ch;

إنها تقصر المسافات بين الكلمات حسب عرض الرقم "0". في خط monospace يجب أن يكون مساوياً تماماً لعرض حرف المسافة (وأي حرف آخر أيضاً). يعمل هذا في Firefox 10+ ، و Chrome 27+ ، ويعمل تقريبًا في Internet Explorer 9 أو أحدث.

Fiddle


أعتقد أنه من غير الممكن القيام بذلك. سيكون من مخاطر أمنية كبيرة إذا كان وصول المستعرض إلى هذا النوع من المعلومات الشخصية





html css