Compositional CSS?

Question

I've just spent quite some time chasing a gap like the one in this plunk. The problem wasn't that simple. It's a dynamically created page and some component having margin-bottom happened to be displayed last inside of .main.

Before I blame CSS, I wonder, what's the proper way for styling such an (old-school) bordered design? I mean something what doesn't break when an unknown component gets put inside?

Are you just trying to have text in the top and bottom borders? — Dennis, Jul 01 '14 at 00:38
@Dennis Sure, I need text there. Currently, everything works, but I want to do it in a way it doesn't break again. — maaartinus, Jul 01 '14 at 00:43

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

Adding overflow:auto; to your main class is a simple one-line fix.

See - Margin-Top push outer div down

edited May 23 '17 at 12:20

Community

1
1

answered Jul 01 '14 at 00:44

RichardB

2,615
1
11
14

I was googling before and I'd never come to the idea that it's margin collapsing. Chromium just shows a gap with no reason at all. – maaartinus Jul 01 '14 at 00:54

score 0 · Answer 2 · answered Jul 01 '14 at 03:35

0

You can add !importantin your css,when you get unknown margin or padding,like

.tagclass{
    margin:0!important;
    padding:0!important;
}

It will raise the priority of margin:0 and padding:0,clear the gap.

answered Jul 01 '14 at 03:35

meeming

88
13

Compositional CSS?

2 Answers2