div has this weird margin on top. How do I fix this?

Question

hope you are all well.

I have 2 divs that are inline to each other. But for some reason, the div on the right has this weird margin at the top. How do I make both divs stick at the top without any sort of weird margins? Also I would like to know what went wrong.

link to jsfiddle - https://jsfiddle.net/vynd2k85/1/

Thanks in advance!

.context {
  box-sizing: border-box;
  width:49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  margin: 0;
}
.context h1 {
  text-align: left;
  font-size: 14px;
}
.context ul li {font-style: normal; margin: 0; font-size: 14px; line-height: 150%;}

vertical-align: top; otherwise it defaults to baseline – Dominic Oct 29 '15 at 15:37 — Dominic, Oct 29 '15 at 15:37

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

It's not a margin, it the vertical alignment. Just add vertical-align:top to your content class:

.context {
    box-sizing: border-box;
    width:49%;
    padding: 10px;
    background: #72ED80;
    font-family:'Source Sans Pro', sans-serif;
    display: inline-block;
    margin: 0;
    vertical-align:top;
}

jsFiddle example

The default vertical align value is baseline, which is what you're seeing.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 29 '15 at 15:36

j08691

204,283
31
260
272

Thanks for answering! – billybobjones Oct 29 '15 at 15:55

score 1 · Answer 2 · answered Oct 29 '15 at 15:39

1

See the updated fiddle.

https://jsfiddle.net/a1L8tugz/

The issue here is that by default, making a div inline will align it to the bottom so you need to add vertical alignment like so.

.context {
box-sizing: border-box;
width:49%;
padding: 10px;
background: #72ED80;
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
margin: 0;
vertical-align: top; 
}

answered Oct 29 '15 at 15:39

TheLimeTrees

413
6
20

Thanks for answering! – billybobjones Oct 29 '15 at 15:55

div has this weird margin on top. How do I fix this?

2 Answers2