Some letters occupy free space on the left. You can see it by highlighting the first letter "H" after running the snippet.
There is the same margin and padding in both header and paragraph elements, however the header is visibly shifted to the right, due to larger amount of empty space which its letter "H" occupies on the left due to its size, compared to letter "H" of the paragraph.
Is there any way to avoid such shift, except by playing with paddings for each case manually?
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
body {
font-family: Open Sans;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Hilariously small paragraph.</p>
</body>
That's normal behaviour, but if it really disturbs you that much, you can use a negative text-indent on the h1 element, which will move the whole text a bit to the left:
h1 {
text-indent: -0.05em;
}
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
body {
font-family: Open Sans;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Hilariously small paragraph.</p>
</body>
There's not really much you can do about that. It will depend on the font you're using.
You'd just have to manually add a 2px padding or move the elements in some other way I suppose.
p {
padding-left: 2px;
}
Related
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
I have some text and would like to make it more narrow so it doesn't span right across the screen. I have typed:
<body style="margin:20">
<body>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
However it doesn't seem to be doing anything to the text. Do I need to close my body style tag? Is margin the correct operator to use? (I am a very beginner, this is literally the first time trying HTML)
The basic syntax of an HTML page is
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
There is only one body for HTML.
So use div, span, p tags within the body for wrapping your content.
<body style="margin:20"> is bad code
Try <body style="margin:20px"> or <body style="margin:1%">
body {
margin: 20px;
}
<div>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</div>
add css on your html,
<style>
body {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Without css just add style property on your body tag,
<body style="margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</body>
Remove second <body> tag
Add unit to margin (i.e. px)
<body style="margin:20px">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
I am learning CSS/XHTML. I have a stylesheet defined externally, and am trying to use it in my HTML file.
The contents of the .css file are simply:
borderstyle {
font-family:"Times New Roman", Times, serif;
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
}
Here is where I am attempting to use it in my HTML:
<body>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
<center>
<div class ="borderStyle">
Welcome
</div>
</center>
</body>
The Welcome text is appearing centered, but with normal formatting, and no border.
Update: This is an XHTML file, I forgot to mention that.
borderstyle is a class, not an element, the selector should be prepended by a period, use:
.borderstyle {
/* CSS here */
}
Further, I'd suggest wrapping the Times New Roman font-name with quotes ('Times New Roman'), and center is deprecated, use CSS auto for the left, and right, margins, or text-align: center; on the parent element, as you've assigned display: inline.
The other answers are all valid. You should correct all the errors they mention.
But there is one additional error that hasn't been mentioned: the class name, "borderStyle". If you target that with CSS, you should use the same casing. I.E. .borderStyle rather than .borderstyle.
Summary of the other errors, for completeness:
borderstyle in the css needs a period
The <link> element should be in the head
<center> shouldn't be used
In addition, I'd say 20% for a font size is awfully small. On most browsers, this amounts to about 3px. Did you mean 200%?
add . befor class and center the text through css, and add style link in head area
.borderstyle {
font-family:"Times New Roman, Times, serif";
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
text-align: center;
}
and this the html without center tag and still the text centered
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
<head>
<body>
<div class ="borderStyle">
Welcome
</div>
</body>
Link to CSS file should be put in the head section, not in the body.
Ex:
<html>
<head>
<title> title
</title>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
</body>
</html>
You're missing a . in the selector of your CSS rule and the class name should be spelled borderStyle rather than borderstyle in order to match the class name in the HTML. Try this instead:
.borderStyle {
font-family:"Times New Roman", Times, serif;
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
}
Also, you should move the link to your CSS file into the <head> section of the webpage, e.g.
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
<!-- body content omitted for brevity -->
</body>
</html>
For classes
.borderstyle
for ids
#borderstyle
tags
div
type, name or any other attribute
[type="type"]
Event after a CSS reset, I've found that IE is apparently attaching a some default styling to the SUP tag. In the following example, the SUP tag is still slightly smaller than the styled SPAN tag. does anyone know a tweak for this?
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
<style type="text/css">
sup { font-size: 16px; vertical-align: super; }
.trademark { font-size: 16px; vertical-align: super; }
</style>
</head>
<body>
<h1>This is a <sup>®</sup> test</h1>
<h1>This is a <span class="trademark">®</span> test</h1>
</body>
</html>
http://jsfiddle.net/utwSv/
You should get in habit of give percentage size to fonts, expecially after using a CSS reset which sets fonts size in percentage.
In the example above, it works ok for me if I set a font-size of 120% for sub elements. But after that I also changed the size of the h1 tags. If I use a fixed font-size in pixels, the sub element still presents a smaller font. Instead, if I set it in a percentage value it will display correctly.
Note I also included YUI reset for CSS Fonts.