Can you have cellpadding or spacing just on the top/ bottom as opposed to all (T, B, L, R) ?
CSS?
td {
padding-top: 2px;
padding-bottom: 2px;
}
There is css:
table { border-spacing: 40px 10px; }
for 40px wide and 10px high
Cellspacing is all around the cell and cannot be changed (i.e. if it's set to one, there will be 1 pixel of space on all sides). Padding can be specified discreetly (e.g. padding-top, padding-bottom, padding-left, and padding-right; or padding: [top] [right] [bottom] [left];).
This might be a little better:
td {
padding:2px 0;
}
Related
I am starting to work with css and have basic issue.
I have a div element:
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}
<div class="top">...</div>
The colour code is taking effect (good).
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
You need to reset both the default padding and margin attributes in your stylesheet:
html, body {
margin: 0;
padding: 0;
}
As #Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
It also looks like you're missing a semi-colon in your css, it should look as follows:
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
There's padding on the <body> of the page. You can fix this like so:
body
{
padding: 0;
}
I had the same problem . just try this :
html, body {
margin-top:-13px;
}
If you need some padding inside the div, you should choose padding:
padding:top right bottom left;
example:
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
Margin will use exact same formula.
After long time I found the correct solution for me:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
If other answers don't work, try position:absolute; top: 0px; left: 0px; or display:flex.
I used this and it worked for me:
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried #HAS's response thanks man ur awesome ... sorry for zombify the post
margin: 0px; would remove all spaces around the element.
padding: 0px; clears the area around the content
you can try:
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
You can also use
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp
I want my table cells to have a margin between them within same row, so I tried setting border-spacing: smth, but it also forces the left-most and right-most to have that same margin from table's outside border. Is it possible to avoid such scenario and apply spacing only between cells?
You can select the first and last td and reset their margins to 0.
td {
margin: 0 5px;
}
td:first-of-type, td:last-of-type {
margin: 0;
}
I have a nav with some <hr/> elements. Preferably in pure CSS (3?), how would set the width of the horizontal rules to auto minus X number of pixels?
This does not duplicate this question, because it is for what would equate to negative padding, which is impossible.
You could use the below.
hr {
width: auto;
margin: 0 10px; /* This leaves 10px margin on left and right. If only right margin is needed try margin-right: 10px; */
}
Try using margin-right
Or you could use Javascript for something more specific. For eg:
CSS:
hr {
margin-right:20px;
width:auto;
}
Demo
There is some background div for font:
#reset_font{
margin-top: -10px;
padding-right: -10px;
padding-left: -10px;
height: 800px;
width: 10%;
background-color: #00ff00;
}
And for top minus margin works, there is no space between font and window's top. But on the right there is thin line white line( without font) between window on right side and font.
If I set width to 101%, there is no space, but I don't like the idea.
It's quite messy to work with negative margins, as those margins might be browser specific.
What works when getting everything to the sides is something like this:
* {
margin: 0;
padding: 0;
border: 0;
}
Put that at the top of your css and you should be good.
The space that you see is for body and in some browser, for html. Just set the margin and padding to 0 for this two elements:
html, body {
margin: 0;
padding: 0;
}
Here is FIDDLE Demo without removing the gap.
Here is FIDDLE Demo by removing the gap.
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;