How to remove the blank between div.sons?
Tags: html,css
Problem :
Three div.sons were put vertically with no blank between them. Here is the css code and displayed image.
<html>
<header>
<style type="text/css">
div.father {
border: 1px solid black;
height: 364px;
width: 364px;
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
padding-top:20px;
padding-left:20px;
}
</style>
</header>
<body>
<div class="father">
<div class="son">box1</div>
<div class="son">box2</div>
<div class="son">box3</div>
</div>
</body>
</html>
There is no blank between div.sons for the vertically displayed div.son.
Now let's make all div.sons horizontally displayed.
<html>
<header>
<style type="text/css">
div.father {
border: 1px solid black;
height: 364px;
width: 400px;
}
div.son {
margin:0px;
padding:0px;
border: 1px solid black;
height: 100px;
width: 100px;
padding-top:20px;
padding-left:20px;
display:inline-block;
}
</style>
</header>
<body>
<div class="father">
<div class="son">box1</div>
<div class="son">box2</div>
<div class="son">box3</div>
</div>
</body>
</html>
The displayed image is as the following.
How to remove all the blank between div.sons for the horizontally displayed image?
Solution :
One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.
There are a few ways to remove that space
Like this: https://jsfiddle.net/j6rcfkmz/
CSS Howto..
Since there is no text you don't really have a body (in terms of "it has no height"). Try adding some content and then hovering the text: http://jsfiddle.net/kX4Es/4/. You can...
You can't fade the opacity of an element, without having what's behind showing through. The site you linked to isn't fading the opacity of the image, but introducing a translucent...
First thing is to add different style to a tag inside i just use 'i a' for all descendant or 'i > a' for direct child a of i. Second...
Demo here: http://codepen.io/anon/pen/KdgOEW <div class="outer_div"> <div class="first_div"> First div </div> <div class="second_div"> Second div </div> </div> .first_div, .second_div{ display: inline-block; vertical-align: middle; margin-right: -4px; background: #CCC; width: 50%; }...
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar Ive tested the following this works for me in FF5: //...
A) Yes, you can reset styles for a “subtree” of the DOM, but this would mean to override ALL styles of ALL elements when they are nested inside .injected-root. As...
So this isn't maybe exactly what you want but it should get you started. Apply the following css to your li/ul: ul, li { list-style-type: none; display: inline-block; } If...
//same place when scrolling: position:fixed; //just stay at the top position:absolute; top: 5px; left: 5px; Note: for absolute, make sure it is not inside an element with position:relative; or just...
Answer to Q1 found here: What does the ">" (greater-than sign) CSS selector mean? You appear to have a misunderstanding of the child combinator. The remaining questions are regarding best...
my simple example which uses jquery http://jsbin.com/ekazo3...
Use table display css - the table-cell causes the floating to work and the table-header-group and table-footer-group cause the reordering. * { margin: 0; padding: 0; } body { font-family:...
<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then...
I think you just described a block level element. It will wrap when the browser is resized.
Here's a general mixin you can use to create a pair of properties: @mixin ieprop($name, $elementWidth, $containerWidth) { #{$name}: percentageWidth($elementWidth, $containerWidth); *#{$name}: iePercentageWidth($elementWidth, $containerWidth); } You pass the property name...
You can always use float:right; in addition to float:left;. #wrap div:nth-of-type(odd) { float:left; } #wrap div:nth-of-type(even) { float:right; } Fiddle...
div.foo b, div.foo strong { font-size: 1.2em } if you are using inline style like <i style="font-weight:bold"> case is more complicated. Then you have to use jQuery+CSS $('div.foo *[style=font-weight:bold]').addClass('myFontSize'); div.foo...
If I understand correctly you want something like this: Html (place somewhere on top): <img src="URL_TO_IMAGE" id="overlay"/> CSS: #overlay{ width:100%; position:absolute; /*You may also use fixed depending on your needs.*/...
http://jsfiddle.net/fZse3/ <style> #col1, #col2 { float:left; width: 50%; } </style> <div id="col1"> <div> <div>title </div> <div>content </div> <div>name </div> <div>data </div> </div> <div> <div>title </div> <div>content...
What about something like this? div{ width:100%; height:30px; border:1px solid red;/* for fiddle visualization*/} ul{ margin:0; height:30px; width:430px; position: relative; } div ul:first-of-type{ background-color:#00f;/* for fiddle visualization*/ left: 50%; margin-left:...
Try this: .menuruban { z-index: 1; } .zoneimg { z-index: 0; } ...
What I have done is to create a new container to contain the image and rotated the container. The java code is: //Run the play when the "Play Ball" button...
Demo css only solution #wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align:...
you can instanciate your display value before outputing : <?php $display = ($getcustomerobj->companypro == 1 && $_REQUEST['edit']!="") ? 'block' : 'none'; ?> <div style="width:24%; float:left; padding:10px;display:<?= $display ?>;" id="compid">Select Company...
This is not possible using float, but you can try to use a javascript masonry plugin like: http://masonry.desandro.com/ or http://isotope.metafizzy.co/ hope that helps!...
http://jsfiddle.net/Kyle_Sevenoaks/fNYb4/ Using margin: 0 auto; on the inner div using an attribute selector seems to work. div[data-role="controlgroup"] { width: 50%; margin: 0 auto; } Remember that the parent element needs...
Based on Paulie_D's answer, I came with a solution by using font-size: a { font-size: 0; } a span { font-size: 16px; } DEMO Based on the comments on this...
IntelliJ IDEA relies on web frameworks and third-party deployment tools to perform this task. There is a feature request to perform such compilation internally, feel free to vote.
I re-edited your CSS: #heading_layout { margin-top: 30px; width: 100%; text-align: center; background: #f30; } .section-1 span.d:before { display: inline-block; content: ''; width: 10%; height: 1px; border-bottom: 2px dashed #8000ae;...
I think you can do th[role=columnheader] { background-image: none; .... } ...
First of all, welcome to Stack Overflow. When asking a question, it is helpful too see all relevant code (and no irrelevant code) - so in your case, we would...