divs tops not aligning

**gib65** · 07-08-2015, 07:51 PM

Please have a look at the following HTML:

Code:

<html>
<head></head>
<body>
<div style="background-color: red; display: inline-block;">
line 1<br>
line 2
</div>
<div style="background-color: blue; display: inline-block; padding-top: 20px;">
line 1<br>
line 2
</div>
</body>
</html>

I have two divs both inline-block. The first one is red and the second one blue. The blue one has padding-top: 20px. This seems to be forcing the red one to have a top margin. I'm not sure how to set the divs to have their tops aligned. Can anyone tell me how this is done?

**Beverleyh** · 07-08-2015, 08:18 PM

I think I've mentioned the box-model to you before - it is affected by padding and borders. You should look in to that and also the vertical-align property for inline-elements.

**molendijk** · 07-09-2015, 08:30 AM

Vertical alignment:

Code:

<div style="background-color: red; display: inline-block; vertical-align: top">
line 1<br>
line 2
</div>
<div style="background-color: blue; display: inline-block; padding-top: 20px;">
line 1<br>
line 2
</div>