[RESOLVED] CSS padding making element go outside container
Practicing some css to get things a bit more centered, especially with dynamic elements. So the code below is my test page.
I ran it here on firefox, chrome and edge; the spans have padding that pushes outside the containing div/span. I would have thought the container would expand to cover the contents, but it didn't.
Messing with display sometimes gets it to work, but then seems to negate the center.
Probably simple, but can someone explain why or give a link to a site that explains why ?
Code:
<html>
<head>
<style>
* {
/* force the box to be the box... */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.borderblk {
border: solid 1px black;
}
.borderblue {
border: solid 1px blue;
}
.borderred {
border: solid 1px red;
}
.spaceme{
margin-top: 8px;
}
.padme {
padding: 10px;
box-sizing : border-box;
}
.circleme{
width:52px;
height: 52px;
border-radius:26px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.testcenter1{
text-align:center;
vertical-align: middle;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="borderblk spaceme ">
<div class="borderred testcenter1">
<span class="borderblue padme ">some content</span>
<span class="borderblue padme ">some content</span>
</div>
</div>
<div class="borderblk spaceme">
<span class="borderred testcenter1">
<span class="borderblue padme">some content</span>
<span class="borderblue padme ">some content</span>
</span>
</div>
<div class="spaceme">
<span class="borderblk circleme">02</span>
</div>
</body>
</html>
Re: CSS padding making element go outside container
Hi,
Since you set your span elements with padding, you may set the top and bottom paddings of the divs too. This is just an option.
-kgc
Re: CSS padding making element go outside container
Hi thanks.
I think I found out why... On another page somewhere on the internet. It stated that the inline type of element ignores top and bottom (ie will not expand to accompany those) where as the block element will move. I think it's this.
Rethought out the code...
Now works.
Thanks for viewing, and something else for me to remember in the future :)
