<style>
div {border-radius:5px;background:#cccccc;}
span {display:block;}
</style>
<div>
<span>First line</span>
<span>Second line</span>
</div>
I want each span to fit inside the div with rounded corners, but they go in front of the div and obscure the rounded corners. If I put rounded corners on each span then you can see a faint outline of each span, even if they have the same background-color as the div.
try overflow:hidden on the div? or give it a z-index of 1000
alternative to #AlexC's answer:
<style>
div {border-radius:5px;background:#cccccc;}
span {padding:0px 5px;display:block;}
.topspan {padding:5px 5px 0px 5px;display:block;}
.bottomspan {padding:0px 5px 5px 5px;display:block;}
</style>
<div>
<span class="topspan"></span>
<span>First line</span>
<span>Second line</span>
<span class="bottomspan"></span>
</div>
see here
If you give the div a padding you will push the content from the borders of the div so they will never overlap. This usually looks nicer anyway.
div {
border-radius: 5px;
background: #ccc;
padding: 5px;
}
span {display:block;padding:0px 10px;}
Click here
You can't add add border radius for span, bcoz span is default display:inline in type.
So you need to change display:block or display:inline
all credit goes to:
http://www.cssstylekit.com/CSS-Border-Radius.html
<style>
.demo-border-radius {
width: 100px;
height: 100px;
border-radius: 30px;
border: 2px solid #000;
overflow: hidden;
}
</style>
<div class="demo-border-radius">border radius div</div>
Related
Why does scrollbar appears when i remove display: inline-block property from link and is there any another way to avoid scrollbar from appearing
Php file -
<main>
<div class="container">
<h2>Test Your PHP Knowledge</h2>
<p>This is a multiple choice quiz to test your knowledge of PHP</p>
<ul>
<li><strong>Number of Questions : </strong>5</li>
<li><strong>Type : </strong>Multiple Choice</li>
<li><strong>Estimated Time : </strong>4 Minutes</li>
</ul>
Start Quiz
</div>
</main>
body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
}
.container{
width: 60%;
margin: 0 auto;
overflow: auto;
}
header{
border-bottom: 3px #f4f4f4 solid;
}
footer{
border-top: 3px #f4f4f4 solid;
text-align: center;
padding-top: 5px;
}
main{
padding-bottom: 20px;
height: auto;
overflow-y: auto;
}
What does below property display:inline-block does to avoid scrollbar in main area
Css File -
a.start{
display: inline-block;
color: #666;
background: #f4f4f4;
border: 1px dotted #ccc;
padding: 6px 13px;
}
You can see what happens when you give a background color to the container.
What happens here is that the padding to the <a> does not help increase the height of the container.
.container {
background:tan;
padding:1px .5em;
}
.container a {
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline text here</a>
</div>
The system doesn't use the <a>'s padding for the calculations of the container's height, so the container incorporates the line height of the a, but not the bottom padding.
So the <a> overflows out of the container. Its padding does not have any effect on its positioning. (You also see that the top padding of the <a> is inside the bottom margin of the <p>.)
Now if you change the <a>'s display mode to inline-block, the whole picture changes: the padding does count; the container does grow to encompass its padding, and its top padding is no longer intruding on the <p>'s bottom margin.
.container {
overflow:visible;
background:tan;
padding:1px .5em;
}
.container a {
display:inline-block;
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline-block text here</a>
</div>
So there are a couple of solutions:
Accept that things are as they are; keep the <a> an inline-block
Remove the overflow:auto, so that the <a> bleeds out of the container. This may affect elements on the screen below the container though
Don't use padding on the <a>
Put some other, block or inline-block, element in the container after the <a>.
So I've got essentially a list of items, that are separated by a border. I'd like to have equal padding and margin applied to the top and bottom of each item.
Here's a fiddle that contains a simplified version of what I'm working with.
Now, you see, I have 10px of margin and padding applied to the top and bottom of each item, but the items aren't evenly spaced. There's more space above each item than below it.
I realize that this is probably a result of CSS's collapsing margins behaviour, and that I could fix it by adding more padding than margin to get the spacing I want.
The issue is, however, that to some items, I want to highlight by adding a background colour, like this fiddle. And when I do, the padding on the top and the bottom must be the same.
So how can I fix this issue? I want it to be super flexible, so I can customize the amount of padding and margin if I like, and also be able to remove the border but still have it display properly.
HTML:
<div class="list">
<div class="item">
<span class="fill"> </span>
</div>
<div class="item">
<span class="fill"> </span>
</div>
<div class="item">
<span class="fill"> </span>
</div>
</div>
CSS:
.item {
display: block;
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid red;
}
.fill {
background-color: #aaa;
display: block;
height: 150px;
}
.bg {
background-color: #ccc;
}
Here is a fork of your fiddle
To achieve correct symetrical, vertical spacing, I actually created a 1px div to replace your border:
<div class="myborder"> </div>
with myborder class like so:
.myborder {
heigth: 1px;
background: red;
font-size: 1px;
margin-top: 10px;
width: 150px;
}
The border div is placed in between item divs, like so:
<div class="item">
<span class="fill"> </span>
</div>
<div class="myborder"> </div>
<div class="item bg">
<span class="fill"> </span>
</div>
In item class, I removed the border and margin-bottom attributes:
.item {
display: block;
width: 150px;
margin-top: 10px;
/*margin-bottom: 10px;*/
padding-bottom: 20px;
padding-top: 20px;
/*border-bottom: 1px solid red;*/
background-color:yellow;
}
You will get symetrical, vertical spacing between items as long as myborder's margin-top and item's margin-top attributes are equal.
UPDATE: in the provided, forked fiddle, I also created an invisible border class, as you mentioned being able to remove the border and keep proper spacing:
.myinvisibleborder {
height: 1px;
background: transparent;
font-size: 1px;
margin-top: 10px;
width: 150px;
}
By setting background to transparent, it becomes invisible; another way would be to set height and font-size to 0px;
The reson for problem lies in margin itself. If you are providing a
margin then it will take a blank space from provious element. Now if
you are applying padding means indirectly u are increasing div size.
Here in your problem u can solve this by making top and bottom margin
0 and instead doubling padding in ".item" class as follows:
.item {
display: block;
width: 150px;
**margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 20px;
padding-top: 20px;**
border-bottom: 1px solid red;
}
this will look perfect without touching to other code segments!
The problem is the way you are seeing things. The padding and margins are all equal, but you can't see them that way as you only have a bottom border. If you add a top border (red like the bottom one), you can see that the spacing is exactly the same between the items.
Now if you want to fix your problem, you have to take into account that you only have one border, so you can remove one of the paddings or margins.
Edit: Replace your css code with the following and you should achieve what you want:
.item {
display: block;
width: 150px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid red;
}
Edit 2: I just realised that because of your highlighting in your second example, you'll run into another problem. So you'll probably have to take out the red line from the divs and put them into a separate entity.
Edit 3: Here's a jsfiddle with updated, hope it does what you want.
I have a parent div with rounded corners and no padding. The parent div can contain different child divs which each have a background colour.
By default the child's background color extends to the corners and is not limited by the parent's rounded corner. I need the background color not to 'cut off' the rounded corners.
I also need to absolutely position content in the child div outside of the parent div. For this reason I cant just set overflow hidden to the parent div.
http://codepen.io/anon/pen/ogGoMr
<div class="one">
<div class="two">
Text
</div>
</div>
.one {
border: 1px solid grey;
border-radius: 10px;
}
.two {
background: blue;
}
If you want more divs inside the parent div, that do not 'cut off' the rounded corners, you can set:
.one > div:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.one > div:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
CodePen
I offer two ways to do this :
1.Add a border-radius to chaild div:
.two {
border-radius:10px;
}
2.use Padding to parent div and add background same to parent:
see Example:
.one {
border: 1px solid #808080;
border-radius: 10px;
padding:0 10px;
background: blue;
}
.two {
background: blue;
}
<div class="one">
<div class="two">
Text
</div>
</div>
Is this standard CSS behavior?
How does one get the container to wrap around the button?
http://jsfiddle.net/frank_o/yepw7oLw/
CSS:
.button {
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
HTML:
<div class="test">
<a class="button">Test</a>
</div>
This is happening because your a.button element is currently being displayed as inline. Margin and Padding values applied to the top and bottom of inline elements don't impact elements around it, because the browser doesn't want to affect the flow.
To fix this, add display: inline-block to the a.button element.
This will force the browser to treat it as block for all rules regarding styling, and treat it as inline for placement on the page.
Add
display: block;
to .button
Generally I wouldn't recommend adding padding to an anchor <a> tag.
Add the padding and other styles to a <div> instead, with the anchor encompassing that div: JSFiddle
New HTML:
<div class="test">
<a href='#'>
<div class='button'>Test</div>
</a>
</div>
EDIT: in my JSFiddle example above, the width of the grey button defaults to 100% of the container, but you can change this if required by adding a width value to the .test div.
Try adding
display: block;
as suggested and add a width to the button so it is not the full length of your div, e.g:
body {
padding: 20px;
}
.button {
display: block;
width: 4%;
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
See my example here:
http://codepen.io/anon/pen/Ewrjh
<div id="container"></div>
<div id="box-container"></div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
</div>
#container {width:100%;}
#box-container{width:800px;float:left;margin-left:5%;margin-right:5%;}
#box {width:180px;margin: 2%;float:left;text-align:center;border:1px solid #ccc; display: inline-block;}
I want to center the 4 divs 'box' in the center of the percentage div 'container'.
Thanks in advance.
I forked your code and provided a new sample here: http://codepen.io/anon/pen/zdLAw
I mostly removed cruft, and simplified your css selector:
.box {
margin: 20px auto;
padding: 10px;
width: 180px;
text-align: center;
border: 1px solid #ccc;
}
The best method to achieve centering is using the margin property. Apply this to your div element add add some vertical spacing, and you will get what you want.