[英]CSS border inside padding
I Have a simple css box made with:我有一个简单的 css 框,用:
border: 1px solid #CCC;
I'm trying to add some space from the left side of my text to the border.我正在尝试从文本左侧到边框添加一些空间。 I tried with margins
and padding
but it's always outside the box, while I would like some margin inside.我尝试使用margins
和padding
但它总是在框外,而我想要一些边距。
My text inside the box is always attached to the left side, how can I add some margin/space between the text and the box?我在框中的文本总是附加在左侧,如何在文本和框之间添加一些边距/空格?
I have the code on: https://jsfiddle.net/z2v27rcq/ if it helps.如果有帮助,我有代码: https : //jsfiddle.net/z2v27rcq/ 。
Use padding
, that's inside the border:使用padding
,它在边界内:
div { box-sizing: border-box; display: inline-block; width: 150px; border: 1px solid #CCC; padding: 30px 20px; }
<div style="border: 1px solid #AAA"> <p> Hey! </p> </div>
You weren't using padding properly, you just needed to add some padding to the left:您没有正确使用填充,您只需要在左侧添加一些填充:
div { display: inline-block; width: 150px; height: 50px; border: 1px solid #CCC; padding-left: 10px; }
<div style="border: 1px solid #AAA"> <p> Hey! </p> </div>
You need to add padding on the div itself:您需要在 div 本身上添加填充:
div {
padding-left: 5px;
}
or add padding to all sides of the box like this:或者像这样在盒子的所有侧面添加填充:
div {
padding: 5px;
}
Add one more div and border to outer div and padding to inner div.添加一个 div 和边框到外部 div 和填充到内部 div。
<div style="border: 1px solid grey">
<div style="padding: 10px;">
<!-- Your Stuff -->
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.