CODEWITHSUNDEEP
csshtml
dcgenjin
dcgenjin

Reputation: 1108

Mystery space between elements despite use of borders only with border-sizing: border-box

So I can't figure out why setting the div to 55% and the img to 45% results in the image shifting to the next line. Here's the HTML:

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
    <img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

I've used normalize.css for resets. The relevant CSS is as follows:

p {
    margin: 0;
    border: 0;
    padding: 0;
}

section.explanation-paragraphs-section {
    max-width: 1000px;
    min-width: 300px;
    margin: 0 auto 2rem auto;
}

div.explanation-paragraphs-div {
    box-sizing: border-box;
    display: inline-block;
    margin: 1.5rem 0 0 0;
    width: 55%;
    vertical-align: top;
}

div.explanation-paragraphs-div p {
    margin: 1.5rem 0 0 0;
}

div.explanation-paragraphs-div h2 {
    margin: 0;
    padding: 0;
}

section.explanation-paragraphs-section img {
    box-sizing: border-box;
    display: inline-block;
    width: 44.5%;
    border-top: 1.5rem solid transparent;
    vertical-align: top;
}

img.explanation-paragraphs-left-img {
    border-right: 1.5rem solid transparent;
}

img.explanation-paragraphs-right-img {
    border-left: 1.5rem solid transparent;
}

Setting the width of the img to 44.5% is a workable hack, but I can't figure what would be contributing any additional width to make it so that setting the img's width to 45% causes the img to shift to the next line.

Upvotes: 0

Views: 556

Answers (4)

ralph.m
ralph.m

Reputation: 14365

For the sake of those looking at the issue of removing inline-block whitespace, the option of removing line breaks between code blocks is not always practical, especially in situations like blocks being created by a CMS. Setting font-size to 0 is also very problematic. Here's a link to a pen that demonstrates a much more useful CSS fix: http://codepen.io/pageaffairs/pen/BfIun/

Upvotes: 0

Josh KG
Josh KG

Reputation: 5150

Think of inline-block elements that are next to each other as other inline elements that are next to each other. For example, some spans next to each other with spaces in the code such as:

<span>Hi</span> <span>There</span> <span>Friend</span>

Render like this:

Hi There Friend

Whereas some spans next to each other WITHOUT spaces that are coded this way:

<span>Hi</span><span>There</span><span>Friend</span>

Render like this:

HiThereFriend

Your inline-block elements that are wedged next to each other show that same white-space because your code has a line-break (interpreted as white space when rendered). If you fit your div and your img without white-space in your code, that extra rendered space should go away.

<div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
         ^^

Note the absence of white-space between the div and img in your code.

Upvotes: 0

T J
T J

Reputation: 43166

Like inline elements, the white spaces and line breaks in HTML between inline-block elements will be considered as a single white space.

You'll either have to remove these, or set the parent elements font-size to 0 - which is in most cases not a practical solution.

Instead of using inline-block you can float the <div> to left and <img> to right.

JSFiddle

Or if ancient browser support is not an issue, you can apply display:flex on their container

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78006

Remove the line break after the div, before the image: 

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

Working demo: http://jsfiddle.net/seancannon/7Bhy5/

Upvotes: 2

Related Questions