Does a block element behaves as if it has a 100vw width?

Question

Is there any deep difference between this two containers? , or in a nutshell is the same..

<head>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        body {
          font-weight: bold; 
          font-size: 30px; 
          font-family: sans-serif;
        }
        
        div {
          padding: 10px; 
        }
        
        .container-1 {
          background-color: tomato;
          
        }
        
        .container-2 {
          width: 100vw; 
          margin-top: 20px; 
          background-color: limegreen; 
        }

    </style>
</head>
<body>
<div class="container-1">
  HELLO WORLD! (default width)
</div>

<div class="container-2">
  HELLO WORLD! (vh width)
</div>
</body>

I want to know if a block element behaves as if it has on it a 100vw.

Does this answer your question? [Difference between Width:100% and width:100vw?](https://stackoverflow.com/questions/25225682/difference-between-width100-and-width100vw) — SinisaM, Dec 09 '22 at 20:03
The padding is enough. The content width of container-1 is equal to (100vw - 20px). — Alohci, Dec 09 '22 at 20:38

score 0 · Answer 1 · answered Dec 09 '22 at 20:38

Does a block element behaves as if it has a 100vw width?

Not at all, a block element behave following this rule:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If all the margin, border, padding are 0 and the width of the containing block is equal to 100vw then you won't see any difference but this is a very specific situation.

A basic example to demonstrate the difference:

.box {
  height: 80px;
  background: red;
  margin: 10px;
}

<div class="box"></div>
<div class="box" style="width: 100vw;"></div>

Does a block element behaves as if it has a 100vw width?

1 Answers1