Question

为什么跨度小于它的父div？

<?php
require_once('simple_html_dom.php');

// Create DOM from string
$html = str_get_html('<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>');

$html->find('div.article', 0)->innertext = '<div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>';

/** 
 * Output: <div id="article"><div style="background: transparent url(/images/img-1.jpg) no-repeat;
 * background-position: center center; background-size: cover; width: 566px; 
 * height: 576px;">alt for image</div></div>
 */
echo $html; 
?>

.class1 {
  background-color: red;
  border: solid thin;
  padding: 0px;
  margin: 0px;
}
.class1 span {
  background-color: yellow;
  font-size: 60px;
}

Answer 1

原因是div和span元素的默认display样式的性质。

display CSS属性指定用于的渲染框的类型一个元素。在HTML中，默认显示属性值取自 HTML规范中描述的行为或来自浏览器/用户默认样式表。 XML中的默认值是内联的。

div元素是块级元素（尊重维度，默认为全宽）span元素是inline元素（内容确定维度，用于所有目的，以类似于文本）。

因此，您需要将display:block设置为子span，以匹配两种显示类型。或者，由于span不再像跨度那样，请将其更改为div

＆＃13;

.class1 {
  background-color: red;
  border: solid thin;
  padding: 0px;
  margin: 0px;
}
.class1 span {
  background-color: yellow;
  font-size: 60px;
  display: block; /* <---- add this */ 
}

＆＃13;

<div class="class1">
  <span>DRAWBACK</span>
</div>

＆＃13;

Answer 2

因为DIV元素是块。 SPAN元素不是阻止。

如果你需要你的span占据它的父div元素的整个空间，在CSS中设置它是display: block：

.class1{
    background-color:red;
    border:solid thin;
    padding:0px;
    margin:0px;
}

.class1 span{
    background-color:yellow;
    font-size:60px;
    display: block;
}

<div class="class1">
    <span>DRAWBACK</span>
</div>

Answer 3

https://jsfiddle.net/3rfkck1d/1/

.class1 span{
    background-color:yellow;
    font-size:60px;
    display:inherit;
}

你必须使用display：inherit;

跨度小于父div，为什么？

3 个答案: