CSS: Adding a border changes the background-color (?!)

Question

HTML:

CSS:

div { background-color:green; border-top:1px solid white; }
p {          


        

Answer 1

It's because the

is right against the bottom of the enclosing

. Since there's nothing constraining the height of the

, the rendering gives just enough space to fit down to the bottom of the

. Any explicit height > 50px will show the bottom.

Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.

Read up on the CSS box model, for example here: http://www.w3schools.com/css/css_boxmodel.asp and here: http://www.w3.org/TR/CSS21/box.html

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...