I'm a Web developer.
I have one question about textarea default margin value.
http://jsfiddle.net/tTnCd/175/
This link is jsfiddler site.
I make CSS by
textarea {
position: absolute;
}
<textarea>tyjyjyj</textarea>
enter image description here
You can see a picture from an upper link.
Red checker is default margin on textarea that I say.
How to remove this white space?
Thanks!
try this
body {
margin: 0;
}
If you inspect it in your browser via developer tools, you'll see that that's actually the default margin for the body. You'll want to remove your CSS and do what #Rajath Kumar PM suggested. :)
this will do it
textarea {
margin: 0;
padding: 0;
}
There is concept of Reset CSS and normalize CSS. Please go through them. Here is the one nice explaination for that.
What is the difference between Normalize.css and Reset CSS?
Point 2 is try to avoid position absolute to make it to corner of the page. Absolute is not intended for that.It alters dimensions of the parent div.So please use absolute and fixed wisely and where it is intended to.
Related
What’s the default margin that HTML sets for its <body> tag? I noticed that there’s some automatic margin, but I’m wondering if anyone knows how much it is (and whether it’s in px or %, etc.).
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
According to W3School's CSS reference,
the default properties and values for a body tag are,
body{ display : block; margin : 8px; }
And one can quickly get the computed details of any element by accessing the Computed Pane in the Chrome Dev tools.
css default values
https://www.w3schools.com/cssref/css_default_values.asp
body{ display : block; margin : 8px; }
* {
margin: 0;
padding: 0;
}
The body can also be reset using the asterix tag.
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.
I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page.
http://liveweave.com/c6j68I
The objective is to show a fixed 900px white div centered against a coral background.
I've tried to achieve this using two divs maked #outerWrapper and #wrapper.
However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).
If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)
I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.
In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.
Please help.
Just add a style for the body in your CSS and set the margin to 0px, like so:
body {
margin: 0px;
}
Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
If you want to change it, you can just do this, add it on your css
* {
padding:0;
margin:0;
}
Want to be more complete?
use normalize.css. It resets a lot of default values to be consistent across browsers.
Try adding the following
<style>
body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.
Note: In most browsers you can open the developer console by pressing F12 on your keyboard:
Just set the following css to avoid it:
html, body {
margin: 0;
padding: 0;
}
Demo: http://liveweave.com/EzWH0o
I am using the Pinterest hover button widget for a client website.
https://developers.pinterest.com/on_hover_pin_it_buttons/
By default it appears at the top left of all images. It doesn't look like their script allows for positioning. Is it possible to override this with CSS?
Thanks
Yes I believe that it is. If you generate the code you will see that the pin it button is created as a span and then positioned with inline styles, I am guessing dynamically with each image.
In the example I looked at it had the class xc_pin, so I will use that for my example but bear in mind that the class you have may be different.
As I mentioned, the span is styled inline, so to overwrite it you will have to use !important, else the styles will be overwritten. Here is how your code could look:
xc_pin {
left: 20px !important;
top: 50px !important;
}
I hope that this helps!
EDIT WITH WORKING JSFIDDLE
After playing around with the css I managed to find a way to target it using the css sibling selector, here is the jsfiddle: https://jsfiddle.net/2xzxgvfw/19/
Hope this solves your issue!
I do not know how you generated the code but I think there should be somewhere a file called: ppibfi_pinterest.css in this file look for the line:
.pibfi_pinterest .xc_pin{}
there you should find something like: top: 5px; margin-left: -1px;
if you adjust this, you should be able to modify the position of the pinterest icon
Going straight to the point, I'm a beginner in CSS. I found twitter bootstrap that seems very promissing and easy to use... well, not so.
Take a look please at this.
I need to:
1) place the logo (with an X) inside the square that it's now below it
2) add some margin from the top. Right now, there is almost no space between the browser url bar and the logo/fields
3) add some spaces between the input fields when they are horizontal, eg. fields: "Seu Número de Celular:", "Boleto Bancario" and "Conta de Consumo". Right now, they are almost glued one to the other.
I would also appreciate any good advices on tutorials on CSS. I'm using django, if this matters.
Thanks for your help
W3C Schools is a good point to start with CSS.
1) Learn about position:relative or use background and place the box as background-url
.your-square-image /*You will need to put class="your-square-image" to the squarebox*/
{
position: relative;
top: -120px;
z-index: -1;
}
2) Simply use margin-top to adjust the margin from top
.logo {
margin-top: 50px;
}
3) Use margin-right for all your inputs (or put it in proper class)
input
{
margin-right: 15px;
}
All the css above can be placed at the top of your html page or put in separate css file and link it from your page (recommended).