I am trying to figure out why the box in this fiddler has so much padding above and below the text.
http://jsfiddle.net/fZ6d7/1/
CODE
<style>
.simplebox {
padding: 6px;
background: #eee;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
}
.simplebox-content {
box-shadow: 0 1px 1px #ddd inset;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
padding: 0 8px;
}
</style>
<div class="simplebox" data-editurl="/TextualReporting/ShowProgressEditor?itemId=5d205a60-64de-4717-ac1d-9db00189db74" style="">
<div class="simplebox-content">
<p>This is a test. This text has too much padding above and below.</p>
</div>
</div>
Any insight?
Your issue is the default padding and margin! You can use this basic universal reset to remove all default padding and margin for all of your html elements:
* { padding: 0; margin 0;}
Add it to the very top of your css stylesheet, that way nothing will have padding unless you specify it. So your <p></p> (or any others) wont have that pesky default margin.
Using some form of resets is a front end best practice. Interested in more advanced resets? Check out normalize.css.
Example in a fiddle: http://jsfiddle.net/agconti/SLjV2/2/
Paragraph <p> has got margin by default :-)
This is due to the <p> tag which has some margin as a standard. To remove it merely add
p {
margin: 0px;
}
to your css... or alternatively use another tag.
Related
I want to create a fine border around my text hyperlinks. However the box I have created seems to be pushing the text underneath it to the right. See the following image:
This is the CSS I have used:
div.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
float:left;
}
I thought it might relate to the line spacing, but the box seems to follow the height of the line space.
Any help would be appreciated!
The border sits on the outside of the element, making that element slightly larger than the surrounding text, and the float:left causes the floating of the text, but under the end of the box due to the height issue. If you remove the float - it will layout correctly. Note that I just created a long chunk of text and swapped the box class onto a span. You don't even need the box class to be added - you could do it all with CSS selector specificity - in this case ... p span{...} ...would target the correct elements.
.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
}
<p>This is a long line of <span class="box">text</span> that will break to two lines and will allow the demonstration of the box around the text within each of the spans. Each <span class="box">span</span> will have a border around the text to show the desired effect.</p>
You can try wrapping your text inside a span tag, and adding the following CSS:
span.box {
display: inline-block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
}
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I am scratching my head to resolve this issue but without success.
It is very simple: a div with rounded corners with a h3 on the top (I am trying to simulate a panel with title), very simple.
For some reason, the h3 always has a space, feels like it has a margin or something.
.example-wrapper {
border: 1px solid #555;
border-radius: 10px 10px 0 0;}
.example-wrapper h3 {
background: #555;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 10px;
font-size: 16px;}
<DIV class="example-wrapper">
<H3>Herry Potter</H3>
</DIV>
Any comments would be appreciated.
You can find the issue here.
Yes, H# has margins by default. Set H3{ margin: 0; } to solve it. You can always use developer tools to inspect elements and see any style applied to them.
How can I get the content in a two-column area to line up correctly? Here is a link to the page showing the content in question. After I get the two divs to line up, then I will try to add the yellow arrow that is seen in the single-column version. That will likely be another question when the time comes.
Here's the CSS
#half-box-container {
overflow:auto;
width: 100%
}
#half-box-left, #half-box-right {
width: 50%;
margin:5px;
padding: 1em;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
#half-box-left {
float:left;
}
#half-box-right {
float:right;
}
#half-box-content
{
left: 30px;
top: 0;
color: #39275b;
font-size: 100%;
}
Here's the HTML that I'm using.
<div id="half-box-container">
<div id="half-box-left">
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Left Headline</h5>
Content goes here.
</div>
</div>
<div id="half-box-right>
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Right Headline</h5>
Content goes here.
</div>
</div>
</div>
As developer3466402 said, you didn't close the ID of half-box-right. Also you're not supposed to have two elements with the same ID. A browser can only display that as correctly as it can interpret it, and there is only supposed to be one object for each id. Try using classes for the child elements instead.
The reason they won't line up on the same line is when you add the padding and margin, their added widths exceed 100% of the width they can use, so they go on different lines. One reason is that they're using the content-box box-model, which makes the padding go outside of the boxes. This is what you're going to want to do:
#half-box-left, #half-box-right {
width: 50%;
padding: 1em;
box-sizing:border-box;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
This will put the padding inside the element instead of outside. If you don't want to remove the margins from the elements, you can instead simply make the widths smaller than 50%, provided that makes them small enough to escape those 20px of added width they use together.
Looking in the page you linked I saw you forgot to close the ID name of "half-box-right". I guess it is the problem.
Also you can reduce the width for both half-box-right and half-box-left to 38% for they be side by side instead of the right be bellow the left div.
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.