I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Related
The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!
Preface: I've read lots of articles about images inside a div having a strange space around them, etc.
Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div
Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..
Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.
What am I missing? It's my first question so be patient please :)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.
PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!
Change the line-height on the div to zero.
div{
background-color: #ffffff;
line-height:0;
}
jsFiddle example
Set vertical-align to top on the button. That will fix it.
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/