-
divs tops not aligning
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?
-
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.
-
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>
-
