Why does inline wrap so weird? Explain css inline behaviour

Asked Feb 21 '19 at 19:19

Active Feb 21 '19 at 19:32

Viewed 60 times

I just do not understand what is going on in the styling here. Perhaps I don't understand the inline rules. The background of the outer div is overlapping the inner input element??

    .outer{
      display: inline;
      padding: 20px;
      background-color: green;
    }
    .inner {
      background-color: red;
    }

Inline so bork?
    <div class="outer">
      <div class="inner">
        <input type="text"/>
      </div>
    </div>

asked Feb 21 '19 at 19:19

ADJenks

2,973
27
38

3

What are you trying to do and what were you expecting? – j08691 Feb 21 '19 at 19:22
never put block element inside inline element – Temani Afif Feb 21 '19 at 19:24
@TemaniAfif Is this an explicit rule? Does it say that in the spec.? I was wondering about that. – ADJenks Feb 21 '19 at 19:25
I would say this is more a *logical* rule and yes the spec describe this, will try to gather the relevant information – Temani Afif Feb 21 '19 at 19:25
OP & @TemaniAfif - Perhaps this'll help: [Is it wrong to change a block element to inline with CSS if it contains another block element?](https://stackoverflow.com/a/758491/2026606) – Tyler Roper Feb 21 '19 at 19:27
1

@TylerRoper exactly, I was also looking for that one ;) – Temani Afif Feb 21 '19 at 19:28
if you still don't understand why the background is like that let me know (you have to also understand how padding behave on inline element) – Temani Afif Feb 21 '19 at 19:29
@TylerRoper Thank you all for the resources, I suppose I have some reading to do later in my free time. =) – ADJenks Feb 21 '19 at 19:55

Why does inline wrap so weird? Explain css inline behaviour

0 Answers0