CSS意外行为中的边距或填充
我正在尝试使用CSS重新创建CSS表，以提高我的技能。然而，锥形线和h4（装甲级）之间存在小的间距问题，我无法弄清楚它为什么会发生。 {I}重新创建的CSS是http://valloric.github.io/statblock5e/demo.html
这不是一个大问题，但身份仍然想知道我错过了什么。希望能提高我对CSS的理解。
提前感谢您的帮助。
这是我到目前为止的HTML和CSS
body {
margin: 0;
}
stat-block {
margin-left: 20px;
margin-top: 20px;
display: inline-block;
}
.bar {
height: 5px;
background: #E69A28;
border: 1px solid #000;
position: relative;
z-index: 1;
}
content {
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
font-size: 13.5px;
background: #FDF1DC;
padding: 0.6em;
padding-bottom: 0.5em;
border: 1px #DDD solid;
box-shadow: 0 0 1.5em #867453;
position: relative;
z-index: 0;
margin-left: 2px;
margin-right: 2px;
width: 400px;
-webkit-columns: 400px;
-moz-columns: 400px;
columns: 400px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
display: block;
}
h1 {
font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
color: #7A200D;
font-weight: 700;
margin: 0px;
font-size: 23px;
letter-spacing: 1px;
font-variant: small-caps;
}
h2 {
font-weight: normal;
font-style: italic;
font-size: 12px;
margin: 0;
}
svg {
fill: #922610;
stroke: #922610;
margin-top: 0.6em;
margin-bottom: 0.35em;
transform-origin: 0px 0px 0px;
}
property-line{
color: #7A200D;
}
property-line {
line-height: 1.4;
display: block;
text-indent: -1em;
padding-left: 1em;
}
property-line > h4 {
margin: 0;
display: inline;
font-weight: bold;
font-style: bold;
}
property-line > p:first-of-type {
display: inline;
text-indent: 0;
}
property-line > p {
text-indent: 1em;
margin: 0;
}
abilities-block{
font-size: 13.5px;
}
table {
color: #7A200D;
width: 100%;
border: 0px;
border-collapse: collapse;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
th, td {
font-size: 13.5px;
width: 50px;
text-align: center;
}
property-block {
margin-top: 0.3em;
margin-bottom: 0.9em;
line-height: 1.5;
display: block;
}
property-block > h4{
margin: 0;
display: inline;
font-weight: bold;
font-style: italic;
}
property-block > p:first-of-type {
display: inline;
text-indent: 0;
}
property-block > p {
text-indent: 1em;
margin: 0;
}
h3{
border-bottom: 1px solid #7A200D;
color: #7A200D;
font-size: 21px;
font-variant: small-caps;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
margin-bottom: 0.3em;
break-inside: avoid-column;
break-after: avoid-column;
}<body>
<stat-block>
<div class="bar"></div>
<content>
<div class="stat-block">
<creature-heading>
<h1>Animated Armor</h1>
<h2>Medium construct, unaligned</h2>
</creature-heading>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<top-stats>
<property-line>
<h4>Armor Class</h4>
<p>18 (natural armor)</p>
</property-line>
<property-line>
<h4>Hit Points</h4>
<p>33 (6d8 + 6)</p>
</property-line>
<property-line>
<h4>Speed</h4>
<p>25ft</p>
</property-line <tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">14 (+2)</td>
<td id="dex">11 (+0)</td>
<td id="con">13 (+1)</td>
<td id="int">1 (–5)</td>
<td id="wis">3 (–4)</td>
<td id="cha">1 (–5)</td>
</tr>
</tbody>
</table>
</abilities-block>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<property-line>
<h4>Damage Immunities</h4>
<p>poison, psychic</p>
</property-line>
<property-line>
<h4>Condition Immunities</h4>
<p>blinded, charmed, deafened, exhaustion, frightened, paralyzed, petrified, poisoned</p>
</property-line>
<property-line>
<h4>Senses</h4>
<p>blindsight 60 ft. (blind beyond this radius), passive Perception 6</p>
</property-line>
<property-line>
<h4>Languages</h4>
<p>—</p>
</property-line>
<property-line>
<h4>Challenge</h4>
<p>1 (200 XP)</p>
</property-line>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<property-block>
<h4>Antimagic Susceptibility.</h4>
<p>The armor is incapacitated while in the area of an <i>antimagic
field</i>. If targeted by <i>dispel magic</i>, the armor must succeed on a Constitution saving throw against the caster’s
spell save DC or fall unconscious for 1 minute.</p>
</property-block>
<property-block>
<h4>False Appearance.</h4>
<p>While the armor remains motionless, it is indistinguishable from a normal suit of armor.</p>
</property-block>
<h3>Actions</h3>
<property-block>
<h4>Multiattack.</h4>
<p>The armor makes two melee attacks.</p>
</property-block>
<property-block>
<h4>Slam.</h4>
<p><i>Melee Weapon Attack:</i> +4 to hit, reach 5 ft., one target.
<i>Hit:</i> 5 (1d6 + 2) bludgeoning damage.</p>
</property-block>
</div>
</content>
<div class="bar"></div>
</stat-block>
</body>
1 个答案:
答案 0 :(得分：0)
我认为问题在于您的HTML代码，您在
其他但html无法实现。
我在这里指定了你的部分代码
**</property-line <tapered-rule>**
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
可能你是偶然做到了，但这就是导致这个问题的原因。我在下面添加了一个编辑过的片段。
body {
margin: 0;
}
stat-block {
margin-left: 20px;
margin-top: 20px;
display: inline-block;
}
.bar {
height: 5px;
background: #E69A28;
border: 1px solid #000;
position: relative;
z-index: 1;
}
content {
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
font-size: 13.5px;
background: #FDF1DC;
padding: 0.6em;
padding-bottom: 0.5em;
border: 1px #DDD solid;
box-shadow: 0 0 1.5em #867453;
position: relative;
z-index: 0;
margin-left: 2px;
margin-right: 2px;
width: 400px;
-webkit-columns: 400px;
-moz-columns: 400px;
columns: 400px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
display: block;
}
h1 {
font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
color: #7A200D;
font-weight: 700;
margin: 0px;
font-size: 23px;
letter-spacing: 1px;
font-variant: small-caps;
}
h2 {
font-weight: normal;
font-style: italic;
font-size: 12px;
margin: 0;
}
svg {
fill: #922610;
stroke: #922610;
margin-top: 0.6em;
margin-bottom: 0.35em;
transform-origin: 0px 0px 0px;
}
property-line{
color: #7A200D;
}
property-line {
line-height: 1.4;
display: block;
text-indent: -1em;
padding-left: 1em;
}
property-line > h4 {
margin: 0;
display: inline;
font-weight: bold;
font-style: bold;
}
property-line > p:first-of-type {
display: inline;
text-indent: 0;
}
property-line > p {
text-indent: 1em;
margin: 0;
}
abilities-block{
font-size: 13.5px;
}
table {
color: #7A200D;
width: 100%;
border: 0px;
border-collapse: collapse;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
th, td {
font-size: 13.5px;
width: 50px;
text-align: center;
}
property-block {
margin-top: 0.3em;
margin-bottom: 0.9em;
line-height: 1.5;
display: block;
}
property-block > h4{
margin: 0;
display: inline;
font-weight: bold;
font-style: italic;
}
property-block > p:first-of-type {
display: inline;
text-indent: 0;
}
property-block > p {
text-indent: 1em;
margin: 0;
}
h3{
border-bottom: 1px solid #7A200D;
color: #7A200D;
font-size: 21px;
font-variant: small-caps;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
margin-bottom: 0.3em;
break-inside: avoid-column;
break-after: avoid-column;
}<body>
<stat-block>
<div class="bar"></div>
<content>
<div class="stat-block">
<creature-heading>
<h1>Animated Armor</h1>
<h2>Medium construct, unaligned</h2>
</creature-heading>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<top-stats>
<property-line>
<h4>Armor Class</h4>
<p>18 (natural armor)</p>
</property-line>
<property-line>
<h4>Hit Points</h4>
<p>33 (6d8 + 6)</p>
</property-line>
<property-line>
<h4>Speed</h4>
<p>25ft</p>
</property-line >
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">14 (+2)</td>
<td id="dex">11 (+0)</td>
<td id="con">13 (+1)</td>
<td id="int">1 (–5)</td>
<td id="wis">3 (–4)</td>
<td id="cha">1 (–5)</td>
</tr>
</tbody>
</table>
</abilities-block>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<property-line>
<h4>Damage Immunities</h4>
<p>poison, psychic</p>
</property-line>
<property-line>
<h4>Condition Immunities</h4>
<p>blinded, charmed, deafened, exhaustion, frightened, paralyzed, petrified, poisoned</p>
</property-line>
<property-line>
<h4>Senses</h4>
<p>blindsight 60 ft. (blind beyond this radius), passive Perception 6</p>
</property-line>
<property-line>
<h4>Languages</h4>
<p>—</p>
</property-line>
<property-line>
<h4>Challenge</h4>
<p>1 (200 XP)</p>
</property-line>
<tapered-rule>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</tapered-rule>
<property-block>
<h4>Antimagic Susceptibility.</h4>
<p>The armor is incapacitated while in the area of an <i>antimagic
field</i>. If targeted by <i>dispel magic</i>, the armor must succeed on a Constitution saving throw against the caster’s
spell save DC or fall unconscious for 1 minute.</p>
</property-block>
<property-block>
<h4>False Appearance.</h4>
<p>While the armor remains motionless, it is indistinguishable from a normal suit of armor.</p>
</property-block>
<h3>Actions</h3>
<property-block>
<h4>Multiattack.</h4>
<p>The armor makes two melee attacks.</p>
</property-block>
<property-block>
<h4>Slam.</h4>
<p><i>Melee Weapon Attack:</i> +4 to hit, reach 5 ft., one target.
<i>Hit:</i> 5 (1d6 + 2) bludgeoning damage.</p>
</property-block>
</div>
</content>
<div class="bar"></div>
</stat-block>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？