This question already has answers here:
How to avoid double border from the multiple <li>
(2 answers)
Closed 3 years ago.
I have a little widget of adjacent divs created by angular ng-repeat.
It looks like this (vertical borders except for forst & last look like they are 2px which suggests border-collapse isn't collapsing:
What I want it to look like is this, except with a left border on the first box. (css specifies no left border)
.
I can of course, set a border-style: solid on just the first box to get a left border, but I am creating these widgets programatically with AngularJs which means I would have to right logic to have different css on the first widget than the other 7. But it seems like I should be able to get what I need with the same css on all the divs if collapse worked as expected.
Here's current CSS I used with all the little tricks I saw in various posts on the subject to avoid the double vertical border.
.container {
display: flex;
flex-direction: row;
margin-left: 5px;
}
.item {
display: table-cell;
border: 1px solid gray;
border-spacing: 0px;
border-left-style: none;
background-color: #fffff7;
border-collapse: collapse;
box-sizing: border-box;
}
border-collapse doesn't do anything to table-cell styled elements, it's used with display:table.
Your code looks this way because you are applying a 1px wide border to every element, causing them to stack next to eachother and become 2px.
Because you didn't supply HTML I create something simple, but this should give you an idea of how you could handle borders if you want to use flex-box.
.container {
display: flex;
flex-direction: row;
margin-left: 5px;
}
.container > div {
display: table-cell;
border: 1px solid gray;
border-left: 0;
border-spacing: 0px;
background-color: #fffff7;
padding: 5px;
font-size: 20px;
}
.container > div:first-child{
border-left: 1px solid gray;
}
<div class="container">
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
</div>
P.S. You should probably use grid for this instead of flexbox
Related
I am trying to make a paragraph to fit the width of a text however, I am getting this white space on line breaks. I am looking for any solution that wouldn't affect text and wouldn't require JavaScript (that could cause a reflow). Doesn't have to be inline-block.
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
max-width: 130px;
}
<div id=container>
<p>technique and statement a landscape or discovery a injection or fic</p>
</div>
Demo Fiddle
Is there any way that I can make paragraph width match the width of the longest line?
Here is the expected and current result:
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
max-width: 130px; // you can ignore this if you dont need to be 130 px
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
width:100%;
}
As #skyline3000 mentioned:
"match the longest line" - as #James said, there is only one line. You are artificially making line wraps with the max-width. You either need to put real line wraps into the text, or continue to adjust the max-width.
You need to manually specify line breaks which work for me - handling line breaks is rather an easy job for regular users.
body {
background: gray;
}
#container {
background: white;
display: inline-block;
}
span {
border-bottom: 1px dotted black;
max-width: 130px;
background: white;
}
<div id=container>
<span>technique and<br>statement alandscape<br> ordiscovery ainjectn or
fic i</span>
</div>
JsFiddle
Also, I have decided to move to the span element and wrap it into display: inline-block to achieve this result. I don't know if this result is satisfying to you, I'm not sure if I was trying to fight HTML/CSS spec here. Real line breaks are probably the only solution.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I would need to get rid of the space below the two span tags and don't understand what causes them to be there.
HTML
<div>
<span></span><span></span>
</div>
CSS
div {
border: 1px solid gray;
display: inline-block;
}
span {
width: 13px;
height: 25px;
display: inline-block;
}
span:not(:last-child) {
border-right: 1px solid gray;
}
Screenshot:
https://jsfiddle.net/wjy5hxnu/
You can check the updated jsfiddle here.
div {
font-size: 0px;
}
Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.
div {
border: 1px solid gray;
display: inline-block;
line-height: 11px;
}
Line height will lower the div to meet the line.
Ok so i have text inside a border that's inside a bigger border. The text inside the border is in a row of 2 but the problem is the larger border doesn't go around them. Here's a picture.
The problem i'm pretty sure is either the width or the float of the inside border which makes it a row.
Here is the css:
.fifty {
width: 45%;
float: left;
}
Here is the css for the actual border:
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
}
Here's part of the html:
<div class="count">
<div class="fifty">
<div class="newspaper3">
text
</div>
</div>
</div>
Here's all the html and css http://jsfiddle.net/ELSaV/
Thanks for the help!
Is this what you are looking for?
http://jsfiddle.net/gespinha/ELSaV/4/
Basically your issue is caused by the float: left CSS attribute on the .fifty element. Using the float attribute removes the element from the actual document flow, so its position is ignored by other elements.
To reassign its position to the document flow, you should add an element that has a clear attribute after the one that has the float attribute. This clear should have the value which you wish to clear. In this case it should be left, but in case you need to reuse this element later in your project, you should create a class that clears both.
So, to solve your problem, and reassign .fifty to the document flow I created an empty div element with a class name .clear, and in the CSS I attributed this class a clear: both.
.clear {
clear: both;
}
In order for .fifty children to be displayed in a row, you simply need to assign them the same float attribute, which pushes them in the same direction, forcing their alignment within the parent element.
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
float:left; /* ADD THIS */
}
Note: as I said I just attributed the value of both to this clear element, because I am assuming you could need it later in your project, although, in this case, you only need to clear the left float. There are other ways of establishing a clear on your floats, this is just one strategy.
I have paragraphs on a page which i would like to add a border.
<p class="valid">paragraph</p>
CSS
p.valid {
padding:5px;
border: 1px solid #ccc;
}
The Problem is this displays the paragrph as 100% of the page
I have also tried adding inline-block which wraps the text as i would like, but inline is like float left.
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}
When you float the element, also set it to clear any (left) floating elements:
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
float: left;
clear: left;
}
From the MDN documentation:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
I would use a <span> tag instead of <p> because a paragraph is supposed to extend across the entire page, and it looks like <span> will help you more with what you're trying to accomplish.
I have the code:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
http://jsfiddle.net/TKQzT/
So I end up with two rectangles with letters in them.
I was wanting them to display as squares instead. So currently they're rectangles taller than they are wide.
Does anyone know how to style them so they'll come out as perfect squares?
You'll have to set the display to inline-block, so that you can specify an explicit width and height:
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
Here's the fiddle: http://jsfiddle.net/TKQzT/13/
As letters are higher than wider, you'll have to set the with/height of the box manually.
It's not going to be exact without giving them an equal width and height, but try:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
and if you're using inline just so you can line up the div's side by side then I recommend using float and having the div's not inline. This way you can give them a explicit width and height.
div {
border: 4px solid Brown;
padding:2px 5px;
margin:1px;
float:left
}
See demo here: http://jsbin.com/ojumay/edit#html,live
The better way i know to do it is to fix height and width, while using inline-block display to be able to do it.
Try this :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}