Geek asks and answers

Built-in block without borders?

I have several DIVs displayed as inline blocks; and they seem to get the interval automatically applied between them from the browser. They have margin / padding equal to 0. Is there a way to fix this without using negative margins?

+5
source share
5 answers

Sam, this space that you see is actually empty. This is why deleting pads and fields does nothing. Let me explain. When you have this:

HTML

<div>
    a
    a
    a
    a
</div>

Here's how to do it:

a a a a

... right?

So, if you have this:

<div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
</div>

... you will get the same:

block [space] block [space] block

Now ... there are many different solutions to this problem. I find the most common is to comment out spaces in html:

   <div>
        <div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div>
   </div>

, html . - 0, . :

div {
    font-size: 0; /* removes the whitespace */
}

div div {
    display: inline-block;
    font-size: 14px;
}
+8

.

:

* { margin:0; }

.div { margin:0; }

.

EDIT:

, . :

<div style="display:inline-block">
    ...
</div>
<div style="display:inline-block">
    ...
</div>

, . , :

<div style="display:inline-block">
    ...
</div><div style="display:inline-block">
    ...
</div>

!

+2

Inline- IE6

, :

  • IE6
  • ( " " )
  • /

, divs , float, css, , .

inline- arcticle 9.2.4

SP

,

0

, , , - , https://jsfiddle.net/1ex5gpo3/2/

.parent {
    word-spacing: -1em;
}

.child {
    word-spacing: normal;
    display: inline-block;
}
0
source

You can use both display: inline-block, and float: leftto remove this space.

Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview

0
source

More articles:


All Articles