I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding
Related
This question already has an answer here:
Why is an element with position: fixed moving with a non-positioned sibling?
(1 answer)
Closed 5 years ago.
I have two div elements inside a my body.
The first div is position:fixed, but when I add a paragraph to the second div, the first div moves down from the top of the page by ~20px.
How is adding a paragraph to one div, affecting the positioning of a previous div on the layout?
In the following code, there is one paragraph in the second div. This is the paragraph I am referring to.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
It's because you're not positioning the element anywhere vertically, because you're not setting any of its top or bottom offsets, thus placing it where it would be positioned if it were part of the document flow. This means it will align itself with the first element in the document flow, according to its margin.
That first element in document flow happens to be <p>.
The proper fix for your problem is setting top:0; on the fixed element. For a more detailed explanation please read the accepted answer of the question yours duplicates.
Other possible (improper, IMHO) "fixes" are adjusting the first element in document flow to start from the top of the document, by overriding the default margins of <p> to 0, or setting it's display property to inline-block (or any other inline type of display).
It's because p tags has a margin by default, so you just have to reset this margin using p {margin: 0;}. Here is the working example:
p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help. Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.
If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":
Link Heading...
www.123.com
Some more text...
Here's the skinny
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
<a class=link href='http://www.123.com/'>
<span class=heading>Link Heading...</span>
</a>
<br>
<div class=result>
<span class=site>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.
I'd appreciate any pointers.
Thanks
use CSS line-height: or negativ margin: to change that vertical space
also be sure if you are using breaks <br> that their height: also changes the vertical space
It is because the table rows () has a height of 27 pixels.
If you set class to info in both and style .info {height: 27px; color:#222234}, they will be the same height as in the table.
<div class=result>
<span class=info>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
I would suggest getting rid of your <br> tags, and using a Block Element.
From the related Block formatting contexts:
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
This means that block elements, such as <div> and <p> (among others) will automatically include a line break after them, and the space between them can be controlled with margin. As such, I'd change your code to look more like the following:
<body>
<div class="heading">
<a class=link href='http://www.123.com/'>Link Heading...</a>
</div>
<div class=result>
<p class=site>www.123.com</p>
<p class=info>Some more text...</p>
</div>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
A couple other nitpicks:
Use quotes around your attribute values (<p class="site">...</p>)
Don't use tables for layout (using tables for tabular data is okay)
Proper indentation makes your code more readable
Hi here is a simple solution by putting everything and the same div and only applying a style the the link by using the "a".
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.result{
font-size:0.850em;
line-height:1.2em;
margin-bottom:20px
}
.result a
{
float:left;
font-size:1.2em;
margin:0;
font-weight:normal
}
.result a:link
{
color:#0000cc;
text-decoration: underline;
}
.result a:hover
{
color: #1a0186;
text-decoration: none;
}
</style>
</head>
<body>
<div class=result>
<a href='http://www.123.com/'>Link Heading...</a><br>
www.123.com <br>
Some more text...
</div>
</body>
I have a <div> with an <h1> tag in it (at the moment that is the only thing. I am building this site top-down). I am getting a very large space above the title. When drilling down with firebug, the space is not included in the <body> or the <div>, but is a margin above the <h1> tag. Shouldn't the whole tag, margin and all, be surrounded by the parent container? is there any way to do this? At the moment that space is completely unstyleable, not belonging to any container.
For example:
<html style="background:green">
<head>
</head>
<body style="background:blue">
<div style="background:red">
<h1 style="background:yellow">Hello world!</h1>
</div>
</body>
</html>
You can clearly see when displaying this that neither the <body> nor the <div> surround that margin.
you can try this code cause h1 has a default margin
h1{margin:0;}
I found a similar question here, and following the links a found the answer at these sites:
http://blog.siteroller.net/collapsed-margins-and-free-margins
http://complexspiral.com/publications/uncollapsing-margins/
http://reference.sitepoint.com/css/collapsingmargins
Basically, it has to do with collapsing margins. To solve the problem I had to add a 1px padding to the container.
If you're running into trouble with margin and padding from nowhere, you might want to try using a CSS Reset.
* {
margin: 0;
padding: 0;
}
The above reset usually works for me.
Using
line-height: 0.65em; //tends to reduce or eliminate this over-lapping margin issue.
This is super simple and I'm completely baffled by this behavior. I want my search results to display in a nice grid of blocks of 2 in a row. But instead it shows up crooked where the div with more text pushes others down with it's content. How can I fix this?
Here's a simplified example that shows the problem in FF and Chrome:
<html>
<body>
<style>
.search_result
{
border: thin solid;
width: 250px;
height:200px;
display: inline-block;
}
</style>
<div style='width:508px'>
<div class='search_result'>
Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ...
</div>
<div class='search_result'>
one or more meerkats stand sentry
</div>
<div class='search_result'>
meerkats
</div>
</div>
</body>
</html>
On .search_result, add vertical-align: top.
Live Demo