Friends, here is a very simple problem I am facing. I am having a container called 'testDiv', and inside the container one paragraph to test. The problem is when I am targetting to the paragraph ( .testDiv p ) and assigning margin-top: 75px;, it is affecting to the container also. so, here is what i want. I want to move-down only the paragraph not the container. Is there any poosibility without using absolute position to the paragraph.
here is what i tried so far - http://jsbin.com/adudih/1/edit
You have multiple ways to accomplish this:
Work with padding-top and not margin-top:
http://jsbin.com/etazem/2/edit
Use line-height on the paragraph tag and set it to the same height as your container: (With this method you will have problems with text-wrapping if the text overflows the container width):
http://jsbin.com/etazem/1/edit
Padding vs Margin:
http://www.impressivewebs.com/difference-between-margins-padding-css/
Use padding-top instead of margin-top. So it should be
.testDiv p {
display: block;
padding-top: 75px;
color: white;
}
Update:
The reason why it affect the container is because you've assign the styling like this .testDiv p. It will refer to .testDiv first, then only p.Another way you can just style the paragraph by assigning a class name for it and do the margin.
<div class='testDiv'>
<p class="p-style">Some text to play around.</p>
</div>
.p-style{
margin-top: 75px;
}
Check here, DEMO http://jsfiddle.net/yeyene/Ted2F/1/
For p css, use float & margin-top instead of line-height
Play around the p margin-top and see.
.testDiv {
width: 200px;
height: 300px;
background-color: blue;
text-align: center;
position: relative;
}
.testDiv p {
float:left;
background:green;
margin-top: 130px;
color: white;
}
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.
Here is what I want to achieve:
Fiddle: http://jsfiddle.net/GRQNh/
CSS:
body {
height: 960px;
}
.breadcrumbs {
position: relative;
background-color: #eee;
height: 10%;
}
.name {
color: #000;
margin-top: 50px;
}
Thanks.
DEMO or you may be try with padding-top instead margin-top as follows
.name {
display:block;
color: #000;
padding-top: 50px;
}
Since .breadcrumbs has position: relative, set position: absolute; to .name.
JSFiddle
You need to add display: inline-block; to get the margin to work.
For instance,
.name {
color: #000;
margin-top: 50px;
display: inline-block;
}
Hope this helps.
For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.
However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).
Luckily, there is a css value for display which does exactly what you need:
display: inline-block;
Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.
You can also give up on margins at all and use padding-top: 50px.
in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;
the <span> is an inline element. That means you cant apply margin or padding to it.
For the solution to your problem you have -at least- two options.
1.Change the container of your text to a block element, like <div>
so:
<span class="name">Name</span>
will become
<div class="name">Name</div>
2.Change the behavior of your span by making it a block or inline-block element with this css:
.name {
display:inline-block
/* rest of your css */
These two articles will give you a good idea of what is inline and block
http://www.impressivewebs.com/difference-block-inline-css/
http://css-tricks.com/almanac/properties/d/display/
Here is the HTML code:
<div id="homepage_boxes_holder">
<div class="homepage_boxes">
<h3 class="box_heading">Test</h3>
</div>
<div class="homepage_boxes">
<h3 class="box_heading">Test</h3>
</div>
<div class="homepage_boxes">
<h3 class="box_heading">Test</h3>
</div>
</div>
Here is the CSS:
.homepage_boxes{
width: 300px;
height: 200px;
float: left;
margin-top: 100px;
margin-right: 80px;
margin-left: 150px;
line-height: 10;
}
.box_heading{
text-align:center;
font-family: BebasNeue;
font-size: 30px;
padding: 0;
margin: 0;
border: 1px solid black;
}
For some reason, the h3 is occupying a huge amount of space in the div (it looks as though the padding is huge to me but that can't be since I have set it to 0). I have put a border on the .box_heading for demonstrative purposes. Image is here:
Link to image: http://imgur.com/vDs1KYs -The blue is the div border, and the black is the H3 border.
EDIT: If possible, I would also like the heading to be centred on the div, rather than pushing outside the boundaries.
That's because you added a line-height: 10; to the parent element, which increases the height of each line 10 times.
Just remove that And it works.
Working fiddle
Update
To keep the h3 element at the middle of its parent, you could set a line-height as the parent's height to that element (in this case you could apply this CSS declaration to both parent and h3 element).
.homepage_boxes {
/* ... */
line-height: 200px; /* as the same of the parent's height */
}
Udpated Fiddle
Another option is setting the same padding to the top and bottom of the parent element without setting a fixed height, which makes the children at the middle.
JSFiddle Demo
just add line-height: 1em; to the .box-heading class description.
The line-height attribute alters the 'ascent' or 'ascender height' of the font, making it that high.
Just add this to the h3:
line-height: 1em;
http://jsfiddle.net/B7ZTw/
To center the text both ways please add the following to h3:
position: relative;
top: 50%;
margin-top: -0.5em;
What you do here is: set the h3 to be 50% from the top (so the middle), but then substract half of the element height so it doesn't start at 50% but is centered there.
See here: http://jsfiddle.net/B7ZTw/2/
You can put static height for if it possible
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!