0

I have some elements at the page with display: block, but I need some elements to take only as much content as they require, so I can either use

display: inline-block;

(the problem with this one is that adjanced margins are not merged, so if mixing elements with block and display-block margings do not look consistent)

or 

display: block;
width: fit-content;

The problem with this is that fit-content do not work in IE, and even more MS Edge detection CSS tricks might not work in the future.

Anyone knows of an elegant problem to solve this problem?

So I need elements to have all properties as display: block but to have width: fit-content, or to behave like display: inline-block but that their margins merge with margins of adjanced elements.

An illustration the problem (still unsolved):

http://jsfiddle.net/adamovic/qpL4yayb/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Mladen Adamovic
  • 3,071
  • 2
  • 29
  • 44
  • elegant problem... Sounds like beautiful AIDS – smnbbrv Dec 04 '15 at 09:40
  • I don't think this question was answered in that http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements . That question is about font related space, and I asked about margins. Moreover, in that question there is no elegant answer at all which is actually working since chrome do not support white-space-collapsing as of December 2015 – Mladen Adamovic Dec 04 '15 at 10:49

2 Answers2

0

I suppose the margin you mean is the white space that follow every inline element. You can bypass it by setting the font-size to 0, then inside the content revert the font-size to normal like so:

.container{
  font-size: 0;
}

.content{
  font-size: 1rem;
}

I made a quick jsfiddle to demo here: http://jsfiddle.net/uafjuyru/

Another solution is to give all contents a float:

.content{
   float: left;
}

There are also html-based solution to remove the white space itself, by putting the inline elements side-by-side in your html document. For example:

Write them all on the same line:

<div class="content">Content1</div><div class="content">Content2</div>

Comment out the line-break character:

<div class="content">Content1</div><!--
--><div class="content">Content2</div>
AVAVT
  • 7,058
  • 2
  • 21
  • 44
0

The problem is that in inline-block elements, if you've got spaces between each element, that space fits as an inline element at the side of the inline-block. The fit-content value can be replaced by auto and it works in all browsers (old, new and future).

There are a lot of tricks to avoid the spaces between inline-block elements.


Solution 1

Remove spaces between elements. Imagine this structure:

 <div class="inline-block">Content</div>
 <div class="inline-block">Content</div>

There is an space between the two elements. To avoid that you can make this two different solutions:

 <div class="inline-block">Content</div><!--
 --><div class="inline-block">Content</div>

Or

 <div class="inline-block">Content</div><div class="inline-block">Content</div>


Solution 2

Make font-size to zero in the parent and reset it in the elements

<div class="parent">
   <div class="inline-block">Content</div>
   <div class="inline-block">Content</div>
</div>

CSS

 .parent { font-size: 0; }
 .parent .inline-block { font-size: 1rem; }



The fit-content problem

Set width: auto instead

  .inline-block { width: auto; }

Next time, please, add your code to give you custom help.

EDIT

Width to auto works perfectly with inline-block and tables inside. You are defined display:block it's because the auto doesn't works. See this edition of the fiddle:

http://jsfiddle.net/qpL4yayb/2/

It works perfectly with:

.width_auto_do_not_work {
   display: inline-block; 
   width: auto;
 }
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • width: auto seems not to work as intended if there are tables inside a div, it spans the table to all available space (at least in chrome). OK, next time I'll create an example in jsfiddle. Many thanks for trying to help :-) – Mladen Adamovic Dec 04 '15 at 10:39
  • You are welcome :) Good luck! – Marcos Pérez Gude Dec 04 '15 at 10:50
  • I've added a code to illustrate, the problem is that someone marked it as a duplicate question and even reference question looks different, it's not about CSS margins at all – Mladen Adamovic Dec 04 '15 at 11:03
  • I'm voting to reopen the question. People with gold badges are very fast closing topics, it's not the first time that I've seen this kind of duplication closing. – Marcos Pérez Gude Dec 04 '15 at 11:09
  • I've edited the answer, you can see that works `width: auto` + `display:inline-block` – Marcos Pérez Gude Dec 04 '15 at 11:12
  • But if you put that element next to elements which have margins and display: block or elements with margins and display: table, those margins will collide which will be inconsistent look and feel. From the W3C specification: Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'. And details about collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins – Mladen Adamovic Dec 04 '15 at 11:44
  • I don't understand what you need. Inline block have the two behaviours same time : block level and inline level. It's effectively with margin collapse too. You can see it here: http://jsfiddle.net/y38x9qw3/ With your theory, in this fiddle must have 10px of margin but as you can see, the margins are collapsing and there are only 5px of margin. So margin collapse should work perfectly with `inline-block` elements. – Marcos Pérez Gude Dec 04 '15 at 11:48
  • margin collapse do not work with inline-block elements, your fiddle is not correct, the correction is here: http://jsfiddle.net/adamovic/t2o1owjk/ – Mladen Adamovic Dec 04 '15 at 14:56