display：inline不支持边框

Question

I encountered a problem when I tried to put 2 divs next to each other.

display: inline it deletes my border and doesn't place both divs on the same line.

Please advise:

.gig {
    outline: 1px solid green;
    width: 400px;
    height: 200px;
    display: inline;
}

<div class="gig">
    <h3>The band</h3>
    <p><em>We love to play</em></p>
    <p>Great gigs we have met good people!</p>
</div>
<div class="gig">
    <h1>great shit</h1>
    <p>fdfdsfsd</p>
</div>

Answer 1

Inline对象没有height或width属性，因此请使用display: inline-block 。

Answer 2

you can use:

float: left;

instead of

display: inline;

Answer 3

In contrast to block elements, inline elements don't have properties such as width, height, margin, etc.

Solution:

use display: flex

For cross-browser support:

use display: inline-block

Answer 4

Try one of these changes:

Use float:

float: left;

or

float: right;

Or use display inline:

display: inline-block

or use flex display:

display: flex