Html 为什么我的实际输出和开发人员工具布局不同？

屏幕上显示的白色背景/绿黄色边框div上方的红色小框的尺寸与开发人员工具布局上显示的尺寸不同。 在布局上，它符合 HTML

<div class="bottom">
        <div>   
          <div>
          Colton Smith 
          Verified Buyer
          "We needed the same printed design as the one we had ordered a week prior.
          Not only did they find the original order, but we also received it in time.
          Excellent!"
        </div>     
      </div>
        <div>      
          <div>
          Irene Roberts 
          Verified Buyer
          "Customer service is always excellent and very quick turn around. Completely
          delighted with the simplicity of the purchase and the speed of delivery."
        </div> 
       </div>
        <div>      
          <div class=>
            Anne Wallace 
            Verified Buyer
            "Put an order with this company and can only praise them for the very high
            standard. Will definitely use them again and recommend them to everyone!" 
          </div> 
        </div>
         
      </div>

即实际空间为1550x50 银幕上 6.61 x 22.8 为什么在展览中它会变短

---

可能是开发工具中的一个小故障？开发工具完全按照css显示。输出中的内容非常奇怪。我是说这些数字是怎么得出的？6.61 x 22.8通常，当我们悬停时出现的框的单位是px。也许它显示了一个不同的单位。只要你的代码还在运行，我就不会太担心这个问题

.bottom{
        width: 100%;
        background-image: url(./images/bg-pattern-bottom-desktop.svg);
        padding: 8%;
        display: flex;
      }
      

      .bottom>div:before{
        border: 1px solid red;
        content: "\00a0";
        width: 1500px!important;
        height:50px;

      }
      .bottom>div>div{
        border:2px solid greenyellow;
      }