0

I'm tryng to show two inline div, each div is wrapping 2 block divs, my question here is

Why the inline divs arent showing the background, even when they have children, until I type something inside, the background is showing but only in the text, no wraping the children.

Here's my code:

.container{
    background-color: rgb(37, 220, 20);

    height: 100px;
    width: 100px;
    /* display:block; */
}
.item{
    background-color: coral;
    margin: 10px;
    height: 25px;
    width: 25px;
}
.block{
    display: inline;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container block" style="background-color: crimson">
      <div class="item"></div>
      <div class="item"></div>
      
    </div>
    <div
      class="container block"
      style="background-color: rgb(20, 180, 220)"
    >
      <div class="item"></div>
      <div class="item"></div>
      showing BG
    </div>
  </body>
</html>
Victor Alfonso Pérez Espino
  • 39
  • 7

1 Answers1

0

Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.

In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.

Also - there does not seem to be a "flex-container" class on any of the elements.

.flex-container{
    background-color: rgb(37, 220, 20);

    height: 100px;
    width: 100px;
    /* display:block; */
}
.item{
    background-color: coral;
    margin: 10px;
    height: 25px;
    width: 25px;
}
.block{
    display: inline-block; /* I changed this to inline block */
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container block" style="background-color: crimson">
      <div class="item"></div>
      <div class="item"></div>
      
    </div>
    <div
      class="container block"
      style="background-color: rgb(20, 180, 220)"
    >
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • yeah inline elements hasn't height and width but, is it suppossed that the inline-tag will wrap its children, so it would "adapt" to the children, and showing the bakground-color? – Victor Alfonso Pérez Espino Feb 14 '21 at 22:03
  • 1
    I am not really crazy about applying an inline styling to a block level element that is wrapping other block level elements - you might as well just make the wrapping elements s since they are natively inline - but again - not crazy about inline wrapping block level element. but thats just me – gavgrif Feb 14 '21 at 22:06