Can I use any tag that will allow me to place a line <hr /> on a specific left margin size
Have you tried:
<hr style="margin-left:10px;" />
I would prefer to use a div and add a border to that div. It's more flexible than the tag. This would be a example for a solid line with a margin of 5 px to the top and bottom and 10px to the left and right:
<div style="border-top:1px solid #000;margin:5px 10px;"></div>
I haven't tested it but that should work fine :)
edit: i tested it with firebug and edited the code above.
Related
<img src="Image source here" width="132" height="148" style="border-radius:3px;padding-top:50px"/>
Can anyone post some clarity to as why adding padding-top, seems to cause the browser ignore the border-radius property?
You can do a quick test by removing / adding the padding from the style attribute, notice how WITH padding, the border-radius is ignored.
Is this a bug, or is there good reason behind this?
Thank you for your time.
is because by adding padding top your border just go up (50px) so use margin-top.
like this (i add a background-color to see it better)
<img src="Image source here" width="132" height="148" style=" background-color: #3d3d3d; border-radius:3px; margin-top:50px; "/>
I hope it helps
look at it here codepen
Look at the box model mate, you should use margin-top here instead.
<img src="https://www.google.com/images/srpr/logo11w.png" width="132" height="148" style="border: 3px solid red; padding-top: 50px;"/>
UPDATE:
*Fiddle:* http://jsfiddle.net/Shashi0812/GJ8Bt/
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I am having code like this
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%">2</span>
</div>
currently it is showing like this.
here padding right is not working. it should be such that 2 should be having 10% padded from right of this div.
Is there any other style tag which can do give such padding from right.
by default, inline elements are rendered left to right aligned, unless you specify float property for them.
That means, in a given horizontal line, first span T1 will be rendered adjacent to the left border of the parent and then span 2 will be rendered adjacent to span T1.
so, your padding-right is never being utilized, as the last span is already far away from right border, unless you make it to move right either by float:right or giving it a margin
try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style=" float:right; padding-right:10%;">2</span>
</div>
see this fiddle
This will give the desired effect
<span style="float:right; margin-right:10%">2</span>
Use this:-
<span style="float:right; padding-right:10%">2</span>
Good explanation by above contributors, but you can also try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%;padding-left:60%">2</span>
</div>
Infact, this is about how you take the structure of your CSS, if we consider Left to Right precedence which Manish mentioned, we can also adjust our requirement by inserting a left padding of 60%.
So, this problem can be solved in both ways, if you want to adjust something in between "T1" and "2" you should use mine one, otherwise both are fine.
Hope you got it.
Why am I getting this strange padding, and how can I remove it?
<div style="border: 1px solid black;">
</div>
http://jsfiddle.net/uE9F6/1/
It's because the line-height is bigger than the image of the flag. Specify line-height:11px;. See this jsFiddle for more help.
For more information on this, see the W3C's information on the height of a line.
I've a doubt. Lets consider that we have a div of width 200px. If i add the following the style
style="padding-left:10px; padding-right:10px"
to the element what happens actually? Will the total width of the div increases to 220px with 10px at the left (for left padding), original width 200px at the middle and 10px at the right (for right padding)?
Or will it takes the padding space from the 200px and becomes (10px + 180px + 10px)?
Does the above rendering differs for each browser (especially IE and FF)?
Update
<div style="width:180x">
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;">
<a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a>
</div>
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;">
<div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;">
</div>
<div style="height: 10px;">
</div>
<div style="height: 75px;border: 1px solid #DADADA;">
<textarea>[Type your message here]</textarea>
</div>
</div>
</div>
Thank you
NLV
It will become 220px wide.
In IE5 or IE6 (quirks mode), it will be 10px+180px+10px, but I wouldn't worry about that.
The full story can be found here: http://www.quirksmode.org/css/box.html
All modern browsers conform to the W3C box model. See here for details. Here's a diagram demonstrating how the overall dimensions of a box are calculated:
Essentially the dimensions of a box are width + padding + border. The margin is not added to the width, although it may affect the box's positioning.
Philippe is correct about IE5, which has a broken box model.
If you'd like to alter the way the box model works, you can use the box-sizing CSS3 attribute, though at this stage you'll have to also use -webkit-box-sizing, -ms-box-sizing and -moz-box-sizing to ensure that the different browsers all pick up the value.
More details here: http://www.quirksmode.org/css/box.html