-
Oct 20th, 2016, 10:48 AM
#1
Thread Starter
Don't Panic!
[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>
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Oct 20th, 2016, 11:34 AM
#2
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
-
Oct 20th, 2016, 02:40 PM
#3
Thread Starter
Don't Panic!
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
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|