I need to set a 4px space between all html internal components (in any direction top bottom left right). I am using an external css file for this. I tried this:
body {
padding: 2px;
border: 0px;
margin: 0px;
}
But this sets a space of 4px for all body not between it's components.
Also,
{
display: inline-block;
padding: 4px;
}
is not working either.
Can you please help. I am not allowed to change the html page.
You can use
body * {
margin: 2px;
}
Which will set that margin to every element inside of the body tag.
Looks like you need to set for the elements used on HTML , if you are
using Css preprocessor , then you can declare the values at the top
and later it will be used by all the elements like shown below :-
$standard-padding :2px;
$standard-border:0px;
$standard-margin:0px;
body,p,h1,h2,div,span{
padding: $standard-padding;
border: $standard-border;
margin: $standard-margin;
}
Maybe you can try padding like this:
body *{
padding:4px;
}
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I don't have any experience with html or css, I recently started my blog: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html
But you can see there's so much white space on the left, how do I reduce this? I tried googling some stuff about editing the html or adding a css code, but none of it worked.
This is the css I tried, and it didn't look like it changed anythin
.content-outer {
margin-left: 10px;
}
change the .centered-bottom and post-sidebar class width.
.centered-bottom, .centered-top {
width: 90%; /*change this */
}
if you don't want to have padding for .post-sidebar u can remove it.
.post-sidebar {
box-sizing: border-box;
display: block;
font: normal 400 14px Montserrat, sans-serif;
padding-right: 20px; /*Remove this if u don't want to have padding */
width: 70px; /*change this */
}
Final output:
It looks like sidebar (.post-sidebbar) is causing the main content to shift to the right. If it works, you can position it elsewhere so that your content gets more space.
OR
You can override the css of .centered-bottom, and add margin-left: 100px (Change the number as per your need) to it.
I'm just trying to make the cursor a custom image. I have followed all instructions everywhere but it still will not work:
CSS:
body, html {
margin: 0px; padding: 0px;
border: 1px solid red;
cursor: url(images/rsz_red_crosshair.gif), crosshair;
}
The image is 32x32. The stylesheet is linked properly because the border is showing. The second option (the built in crosshair) works fine. Just wondering what I'm doing wrong, I'm sure it's fairly obvious to others.
Your style syntax is correct and I've implemented it myself just to be sure. I would confirm the location of your image.
This css should solve your problem. Include the URL in quotation mark and make sure path is correct.
body {
margin: 0px;
padding: 0px;
width:100%;
cursor: url('http://icons.iconarchive.com/icons/hopstarter/plastic-mini/32/Cursor-icon.png'), auto;
}
I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
There is a lot of bottom padding on my blockquotes. I can't get rid of it. See this image: http://imgur.com/PGCeY
My CSS settings are:
* {
padding:0;
margin:0;
}
blockquote {
width: 640px;
margin-bottom: 1em;
padding: 0px 0px 0px 0px;
}
I outlined what I am trying to get rid of with a red rectangle. In this image: http://imgur.com/PGCeY
Also I am using the pagelines wordpress theme.
Try adding this to the end of your CSS:
blockquote p {
padding:0;
margin:0;
}
If that doesn't work, right-click and view the source of your page to see the raw HTML. Then you'll know what elements are added to the blockquote.
You have a paragraph(as should be) in your blockquote? It's probably a margin from an inner element.
And it would be nice to see an actual example of the code. The code you show us here is not part of the problem from what I can tell.