Width: the width in the auto: 100%

First of all, I know that for width:auto:

  • Inline-block: is braced by the content
  • Block: fills the parent box

Later, when using width: Auto with width:100%, I found some interesting problems, and I wrote them down along with my findings

  1. <div class="out">
  <div></div>
  <span< p style = "max-width: 100%; clear: both; min-height: 1emspan>
</div>

.out {
  display: inline-block;
  height: 80px;
  white-space: nowrap;
  background-color: #a0b3d6;
}
.out>div {
  width: 228px;
  height: 90%;
  display: inline-block;
  background-color: #c1d5eb;
}
.out>span {
  display: inline-block;
  width: 100%;
  background-color: #34538b;
  color: #fff;
}
Copy the code

Span {width: auto}

  1. What if there were no words in Span

    <div class="out">
  <div></div>
  <span></span>
</div>

.out {
  display: inline-block;
  height: 80px;
  white-space: nowrap;
  background-color: #a0b3d6;
}
.out>div {
  width: 228px;
  height: 90%;
  display: inline-block;
  background-color: #c1d5eb;
}
.out>span {
  display: inline-block;
  width: 100%;
  height: 20%;
  background-color: #34538b;
  color: #fff;
}
Copy the code

  2. Now I have another problem, what is the space between div and span? It turns out that this is whitespace folding: whitespace folding occurs between inline elements of a standard document flow.

<div></div>
<span></span>
    
 div {
   width: 228px;
   height: 80px;
   display: inline-block;
   background-color: #c1d5eb;
 }
    
 span {
   display: inline-block;
   width: 100px;
   height: 80px;
   background-color: #34538b;
   color: #fff;
 }
Copy the code