{ "version": "https://jsonfeed.org/version/1", "title": "Tyler Cipriani: CSS display inline-block Extra Margin/Space", "home_page_url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/", "feed_url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comments.json", "items": [ { "id": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comment_1_1f7f1cdbfd3fce90e72c6453ee617f08/", "title": "comment 1", "url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/#comment-f5251e8cb026df88874f71418b7374ac", "author": { "name": "bestdenis2008" }, "date_published": "2013-11-11T06:39:14Z", "date_modified": "2018-06-13T19:34:11Z", "content_html": "
\n\nSecond, directly address the space by setting a negative right margin or negative
\n
It’s a font-dependent solution, isn’t it?
\n\n" }, { "id": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comment_2_cad18998d316750ce8863b50acac3fc5/", "title": "comment 2", "url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/#comment-9380795cb676a2ac0fdc250d8c388adf", "author": { "name": "thcipriani" }, "date_published": "2013-11-11T06:50:42Z", "date_modified": "2018-06-13T19:34:11Z", "content_html": "Yezzur, that solution will depend on the font-size of the parent container. An easier solution might be to just set font-size: 0; on the parent container.
\nThe more I play with inline-block, the more I like the comment based solution.
\nYou’ll see more solutions in that CSS Tricks article I have linked up.
\n\n" }, { "id": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comment_3_888e4deeb0cb19e5a356b5211dafad3f/", "title": "comment 3", "url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/#comment-86b9551a08bc5f3521980516dec7564c", "author": { "name": "guest" }, "date_published": "2014-01-24T14:29:22Z", "date_modified": "2018-06-13T19:34:11Z", "content_html": "or even better, set font-size: 0px on the parent div\n" }, { "id": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comment_4_76ca8273799334281d238c9056e25315/", "title": "comment 4", "url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/#comment-1b63b5eace1bbf9e11c1b47385b2cadf", "author": { "name": "aayix" }, "date_published": "2014-04-24T00:45:16Z", "date_modified": "2018-06-13T19:34:11Z", "content_html": "Yes Guest, font size 0px is required if you want to display the inline-block elements aligned to center. if u have text in the inner elements u’ll need to set the font size for those back again
\n\n" }, { "id": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/comment_5_731bb409539a922da91d93dc3b169f44/", "title": "comment 5", "url": "https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/#comment-7a1fa2403640b942cfa83fa5073c09bb", "author": { "name": "foo" }, "date_published": "2015-01-06T15:32:35Z", "date_modified": "2018-06-13T19:34:11Z", "content_html": "Two alternatives:
\nset font-size: 0 on the immediate parent and redefine the font-size of the affected (inline-block) children
just use float: left. display: block is redundant (as it’s inferred from floating)