This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 8 years ago.
I'm trying to generate a web page with a diagram that shows how a word is broken down into bit fields. The way I want it to appear is for each field to appear as a row of boxes (one bit per box), and for the fields to be separated by some space. There will be a label below each field. This is what I've tried:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
.left-bit { border-style: solid dotted solid solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.middle-bit { border-style: solid dotted solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.right-bit { border-style: solid solid solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.single-bit { border-style: solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.bit-field-label { font-size: smaller; font-weight: bold }
</STYLE>
</HEAD>
<BODY>
<DIV style="text-align: center">
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="single-bit">a</SPAN>
</CODE><BR>
<SPAN style="display: inline-block" class="bit-field-label">field A</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field B</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">j</SPAN>
<SPAN class="right-bit">c</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field C</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
Basically, I've tried using borders to set up a box for each bit; each bit field and the label below it are supposed to be in their own "box", with the row of bits and label centered within the box, then there's to be a gap of a fixed size between each box horizontally, and then the whole thing is centered.
The result is almost correct except that I can't get the bits in each field to run up against each other. Here's a screenshot. As you can see, I tried getting rid of the space between bits by setting the margins, letter-spacing, and word-spacing to 0, to no avail. I also tried putting each group into another DIV like this:
<DIV style="display: inline-block">
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</DIV>
which had no effect.
Any ideas on what controls this space between the boxes, and how to override whatever it does? (I'm open to other approaches, and I might have to try some kind of <TABLE>, but I'd appreciate an explanation of what's going on even if I have to change my approach.)
I'm using Chrome 37.0. I haven't tried this on other browsers (except an earlier version of IE which apparently doesn't recognize inline-block at all.)
you could have your HTML cleaner but the problem is the display:inline-block create gaps, so you need to remove unnecessary spaces between your HTML tags or reset font-size to 0.
check it here :
Fighting the Space Between Inline Block Elements
There is more solutions on the link above.
Plus you can use display:block; float:left instead.
combining elements like so will remove the space
<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>
it's a hassle I know but it works somehow. you want to put those styles in an external style sheet, not inline like I have them here.
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
<div id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<br />
<div id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
In MS IE:
However, in Chrome or MS Edge:
the html looks like:
The layout in IE is what I expect/want.
However, when I change to the Japanese chars to other language chars (English, Chinese, Korean, etc.).
They all look right.
How can I format the Japanese chars correctly in this case
Why Japanese chars are so special in this case in different browsers provided that they are all UTF-8 encoded?
Why Japanese chars are so special in this case in different browsers
provided that they are all UTF-8 encoded?
They are special because they use different font and therefore are taller than Latin characters. You can see the same result if you use Latin text, but increase the font-size for that specific value span.
However the main problem is that your wrapper div elements are basically non-existent and not forcing child elements to be in rows and therefore each element is trying to be next to its sibling. If you removed the br element you would see that there is only one row.
A better solution is to use css to order your elements into rows and remove the br completely. Simple way to do that is to use flex on your wrapper elements. Also you should fix the height of rows to get a more consistent appearance (I added line-height to counter that).
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
.row {
display: flex;
line-height: 9pt;
margin-bottom: .3em;
}
<div class="row" id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<div class="row" id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
I want to specify margins for all p elements in my html/php page. It should be straightforward, but it doesn't work for me. Please excuse my noob level.
Here is my css code I added to the head:
<style>
p {
margin-left: 120px;
margin-right: 120px;
}
.code {
color : blue;
background-color: lightgrey
}
.center {
text-align: center;
}
</style>
In the body I have p elements, none of which has a margin.In body Example:
<a name="hardware"></a>
<h4>Required hardware:</h4>
<p>
I tested this procedure on a Raspberry Pi 3B+, having 1 GB of RAM.
</p>
Does anyone know why the left/right margin is not working?
I see that margins added.
Maybe because of added class center to p you don't see. If you provide us with more code, it will be clearer.
To illustrate the idea I made snippet, look inti it.
P.S. useful to know, margin in css between siblings not added but the bigger margin wins. You can see in snippet, that p has default top and bottom margin, but sibling ps have gap between them which equals to one of margin's value, not margin-bottom + marging-top values.
.margins {
margin-left: 120px;
margin-right: 120px;
}
.center {
text-align: center;
}
.p-border p {
border: 1px solid black;
}
.border-dot {
border: 1px dotted black;
}
<div class="border-dot">
<p class="center margins">With margins</p>
<p class="center margins">With margins</p>
<p class="center">Without margins</p>
</div>
<div class="border-dot p-border">
<p class="center margins">With margins</p>
<p class="center margins">With margins</p>
<p class="center">Without margins</p>
</div>
I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!
I've had a ShareThis plugin installed on my blog for quite some time now but have only just noticed that not all my 'share icon's' are displaying inline.
I've tried using padding-bottom and margin-bottom but that didn't accomplish what I was hoping.
Would any of you be able to shed some light on what I'm doing wrong?
Code snippet:
<div style= "display: inline; float: left; padding-left: 4px; padding-bottom: 4px;">
<span st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' </span>
<span st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
</div>
Note, in the preview window, the icons remain inline. Very odd.
Replace this CSS class in your script.
.stButton {
position: relative;
z-index: 1;
text-decoration: none;
color: black;
display: inline-block;
cursor: pointer;
margin-right: 3px;
margin-left: 3px;
font-size: 11px;
line-height: 26px;
}
As you can see I have changed line-height to 26px and now it can fit correctly.
I ended up solving my problem using this method: Vertical alignment of ShareThis icons
It's worked although displays oddly in the preview panel.
My next problem is the alignment of the disqus comments. I've tried text-align: right and padding to no avail. I also seem to have lost the line that went across the whole column beforehand... See the image and code below.
<div style="padding-bottom:1px; display: inline-block;">
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span style="vertical-align: top;" st_url='{Permalink}' st_title='{Title}' class='st_twitter'> </span>
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
{block:IfDisqusShortname}<div style= "display: inline-block; vertical-align: top;">{lang:View comments}</div>{/block:IfDisqusShortname}
{/block:Date}
Link to image!