This page shows two images, each contained inside a separate span displayed as an inline block. To the first image is applied the additional style of "display:block", which removes the space between the image and the bottom of its green-bordered span (which space is provided for descenders when an element is styled as inline). Contrawise, this space is visible between the second image (still displayed as inline) and the blue border of the second span.
Why does displaying the first image as a block create space between the first image's span and the element containing the span (orange box)? Is it because when one inline element is contained inside another, the spaces allotted for descenders merge in the manner of vertical margins? Also I am wondering why there is a one-pixel space between the top of the blue span and the orange container.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span>
<span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
</div>
</body></html>
JSFiddle
Whenever there is any whitespace between two inline elements in HTML, the whitespace in will force a gap between them. This happens to your <span> elements because they are inline-elements. This gap can be removed by removing any whitespace between your two span tags, eg:
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
If your images are not set to display: block, you can remove the extra vertical-space by setting line-height: 0; on your <span> elements.
If you are setting your images to display: block, it seems like your best is to use the vertical-align property to align them with each other; try:
.product_box, #stats { vertical-align: middle; }
It's usually a good idea to use a CSS Reset when developing, to minimize the effect of these browser-defaults.
Updated Code:
HTML:
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg" />
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" />
</span>
</div>
CSS:
.product_box, #stats {
line-height: 0;
vertical-align: middle; }
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
Preview: http://jsfiddle.net/Wexcode/4QNhG/
Edit:
Changing the first image to display block doesn't create the space between the image and the containing element, it was there before.
With regards to the one-pixel space: this is just to account for the border of the other element. Whether or not the first image is display-block doesn't matter:
First span no border: http://jsfiddle.net/A6aLW/3/
Both spans no border: http://jsfiddle.net/A6aLW/5/
Related
This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.
I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...
<html>
<body>
<style>
.link-bubble {
float:none;
white-space:nowrap;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.
Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.
Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.
<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}
.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
Can't center text vertically with a link, this is my html code:
<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
<p style="">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
I've tried to specify vertical align, to p tag, also tried line-height, but no success, link still is out of position.
jsfiddle : http://jsfiddle.net/85q6wqjx/
You can realize this layout as follows.
First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.
Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.
Third, apply vertical-align: middle to the p element for it to have the
desired effect.
This approach will work with any number of text lines, as demonstrated.
See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/
.panel {
background:#F7C0B9;
width:645px;
height:170px;
margin:0 auto;
outline:1px solid #FFF;
text-align:center;
line-height: 170px;
}
.panel p {
vertical-align: middle;
display: inline-block;
border: 1px dotted gray;
line-height: 1.25;
}
<div class="panel">
<p>Text<br /> Link<br>a 3rd line for example</p>
</div>
If you want the Link under the text but still both in middle:
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;">
<p style="display:inline-block;">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
JsFiddle
Your line-height was pushing it outside the div and the p being a block element was stopping it from going under. You needed to make p an inline-block element.
If you want them both on the same line, remove <br> from the html.
JsFiddle
br is a line break and line-height effects by that.
Please remove <br> tag you will get what you want
and update your code snippet with
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
<p style="margin: 0;">Text</p>
Link
</div>
http://jsfiddle.net/85q6wqjx/10/
Just add following code to your css file
a {
margin-top: -8%;
display: block;
}
give class/id name to anchor tag if you want to add style particular anchor tag
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
In a responsive design website, I need to show four links presented side-by-side and have the collection of those 4 links enclosed within a self-resizing border. If all four links can't all fit horizontally on one line without overwriting each other, those links that can't fit should drop down to subsequent lines and the bounding border box should increase in size.
My main problem is that the bounding box... doesn't surround the links or resize properly. What am I doing wrong?
Here's the code and CSS that I've tried: http://jsfiddle.net/K3jyD/
HTML:
<div class="boundingbox">
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
</div>
</div>
</div>
CSS:
.boundingbox {
border: 1px solid red;
padding:10px;
margin:10px;
clear:both;
}
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
float:left;
padding:10px;
}
.boundeditem div {
text-align: center;
}
.boundeditem a {
text-decoration: underline;
}
I am not permitted to use jquery or external javascript libraries other than plain old html and css on this project.
The float:left is bringing your links outside the bounding box. Try this instead:
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
display: inline-block;
padding:10px;
}
If you want four links next to each other rather than three, make the width slightly smaller than 25% and put the padding in the div inside boundeditem rather than boundeditem itself.
.boundeditem {
width:24%;
min-width:24%;
max-width:24%;
display: inline-block;
}
.boundeditem div {
text-align: center;
padding: 10px;
}
add this to the .boundingbox
.boundingbox {
position: absolute;
height: auto;
}
Not sure if that's exactly what you're looking for.
i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />