There is a weird gap appearing between the elements here. I would prefer to have them flush together. Any idea how to fix this?
LINK
That's because you haven't provided any css for the tags h1,p. So, browser is adding default margin bottom and top. So, add this to css -
p, h1 { margin: 0 }
It's because you haven't styled those elements which leave it up to the browser to decide. Chrome for instance decide to input margins on the p-element.
p { ...
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
... }
Use a css reset file and you will both fix this particular problem but problably many many similair situations in your future as a web developer.
It is a margin/padding issue as stated by others. What I suggest if you are just getting started and haven't developed any habits yet is to always include a reset.css file. This will get rid of all the browser defaults and allow you to start fresh.
fixes for inline elements are:
vertical-align:top;
or
vertical-align:middle;
display:block;
for images
I found my mysterious white spaces.
Don't do this:
echo "<div>
blah blah blah
</div>"
Instead:
echo "<div>"
."blah blah blah"
."</div>";
Just clean up your code of whitespaces.
I am not quite sure, as to which kind of /gap/ you are referring, but a simple CSS rule like margin:0; padding:0; might help you out.
It's a good idea to use a CSS reset file, like the one you can find on YUI:
http://developer.yahoo.com/yui/reset/
If you do end up using the YUI CSS Reset, make sure you set your background color on the HTML tag as well since YUI's CSS Reset turns it white.
html {
background:black;
}
body {
margin: 0px;
font-family: helvetica;
background: black;
}
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
We are using twenty sixteen word press theme.
The theme has lot of header and footer spaces which would like to remove.
Eventhough we didn't provide any banner or any other images it still have more spaces before the table gets generated in the page or page content
any suggestion on how or where to fix this?
Thanks.
You can just right click on the empty space annoying you and click inspect in chrome. It will show you something like this...
Here... Faint Green outline is the padding... this is causing that annoying whitespace,
.site-header {
padding: 5.25em 4.5455%;
}
Just kill it with CSS, you need higher specificity ( Learn more here https://developer.mozilla.org/en/docs/Web/CSS/Specificity ) for beginners simply prefix body before selector and it will have higher specificity and will work like a charm...
body .site-header {
padding: 0;
}
You can also use !important...
.site-header {
padding: 0 !important;
}
Using !important is not a good practice coz it breaks the heirarchy but since you are designing the site not writing a plugin it's up to you ;)
You can use this for any element, try yourself for footer 😉
You can add the CSS by using a plugin like https://wordpress.org/plugins/simple-custom-css/
I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}
I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}
This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there's an extra space over and below the text.
In chrome I found this:
user agent stylesheet
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?
You can also directly modify those attributes like so:
-webkit-margin-before:0em;
-webkit-margin-after:0em;
Works for me in Chrome/Safari. Hope that helps!
These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.
Extra space? Maybe you've set line-height:?
I had the same issue. Displaying correctly in Firefox but not Chrome.
I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.
Just remove the whitespace between tags e.g.
<p id="one"></p>
<p id="two"></p>
becomes:
<p id="one"></p><p id="two"></p>
I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin.
Just do something like this:
margin: 0 -2px;
NEW EDIT:
This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:
remove all spaces and line-breaks between inline elements
skip element closing tag - for example </li> (HTML5 does not care)
negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
set font-size: 0; to problematic inline element container (has issues with android and if font-sizing with ems)
give up inline and use float (this way you loose text-align:center)
Explained more specifically and examples by CHRIS COYIER
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
For me, the picture was:
* {margin:0;padding:0;}
Firefox (FF) and Google Chrome both put 0.67em margins regardless.
FF showed its default margin, but crossed out, but applied it anyway.
GC showed its default margin (-webkit-margin-before...) uncrossed.
I applied
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
but to no avail, although GC now showed its default margin crossed.
I found out, that I can apply either
line-height: 0;
or
font-size: 0;
to achieve the desired effect.
This makes sense, if one assumes, that the margin is of the .67em - type.
If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.
For me in Chrome it was some 40px padding-start that was causing this. I did the following that worked:
ul {
-webkit-padding-start: 0em;
}
-webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;
This solved it for me when I was having this exact problem.
In your css file add the following.
* {
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
}
'*' selects all css elements and overrides the webkit-margin.
Modern properties
The following properties should be used instead.
margin-block-start: 0;
margin-block-end: 0;
It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.
p:last-child
{
margin-block-end: 0;
}
I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:
table td
{
vertical-align: top;
}
Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.
I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)
Take care!
If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.
Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".
Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.