How to give padding to content inside a outline border
Solution 1:
You only need two container for you to reproduce the effect you desire, basically the outer container should have a white border, the inside container containing the text should have a smaller dimension than the outer container. In my example there's a 2em height and width difference to achieve the effect. Both then sould have display: flex;, align-items and justify-content set to center, to align the items inside of them to the center. See the snippet below for your reference.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
height: 300px;
border: 2px solid green;
background: #4A495B;
}
#Name_Section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.outside {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid grey;
border-radius: 50%;
height: 12em;
width: 12em;
}
.inside{
background: #272636;
color: #fff;
border-radius: 50%;
height: 10em;
width: 10em;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<section>
<ul id="Name_Section">
<li class="outside">
<p class="inside">I AM PRAVEEN KUMAR </p>
</li>
</ul>
</section>Solution 2:
place the element inside a parent div that own the size, the padding and the border
- the parent have a relative position
- the logo have an absolute position
you can now move the child where you want in the parent with properties top, bottom, left or right
#logo{
background-color: rgb(38, 38, 54);
border-radius: 70px;
height: calc(100% - 14px);
width: calc(100% - 14px);
position: absolute;
right:0;
top:7px; //the midle of the parent padding
}
.element-border {
position:relative;
border: solid grey 1px;
border-radius: 70px;
padding: 14px;
height: 120px;
width: 120px;
} <div class="element-border">
<div id="logo"></div>
</div>