[英]How to create self-contained borders in HTML?
I have我有
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have对于造型,我有
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page.这很好用,但是它在整个页面的整个宽度周围显示了一个虚线边框。 I want it to be self-contained, but instead, it goes around the whole screen as you can see in
我希望它是独立的,但相反,它会环绕整个屏幕,如您所见
this picture.
这张照片。 How do I make it so it only goes around the text?
我如何使它只围绕文本? Also, the top border is hugging the background color above it.
此外,顶部边框正在拥抱其上方的背景颜色。 I would also like to know how to change that.
我也想知道怎么改。
This is CSS level 1 : block and inline.这是 CSS 级别1 :块和内联。 Block elements take up 100% of available
width
unless you set them to float
or set an explicit width
.块元素占用 100% 的可用
width
,除非您将它们设置为float
或设置显式width
。 Either set the border
to the paragraph element or set a width
to your div
.将
border
设置为段落元素或将width
设置为您的div
。
Try adding padding = 0px"
to your <p>
tag and <h2>
tag,尝试将
padding = 0px"
添加到您的<p>
标签和<h2>
标签,
p, h2 {
padding: 0px;
}
because <p>
and <h2>
tags have default padding applied.因为
<p>
和<h2>
标签应用了默认填充。
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.