Css box "skips" on second line
In a WordPress plugin (own creation) I want to place some WooCommerce category images ... but there is something strange there.
Each category field is defined more or less as follows:
<div class="edu-cat-item">
<a href="/someurl/"><img src="some-image.jpg></a>
<a href="/someurl/">Title of the cat</a>
</div>
In CSS, blocks are made to float to the left ...
.edu-cat-item {
box-sizing:border-box;
width: 175px;
float: left;
padding:10px;
}
edu-cat-item img {
border-width:2px;
border-style:solid;
}
.edu-cat-item a {
text-align:center;
margin-left:auto;
margin-right:auto;
}
And - not exactly a surprise - it works ... HOWEVER!
The customer wants the selected category to have an orange border.
So, in the PHP code, added an extra class for one specific element ... the HTML becomes:
<div class="edu-cat-item edu-sub-select">
<a href="/someurl/"><img src="some-image.jpg></a>
<a href="/someurl/">Title of the cat</a>
</div>
And the CSS gets more information:
.edu-sub-select img {
border-color: #ff9900!important;
border-style: solid;
border-width: 2px;
}
And now strange things happen ... when it's more than one line, the second line is "indented" one position behind the selected cat ... I would like to post images, but for that I need a "reputation 10" ...
It is advisable to share them by mail.
source to share
You are missing the quote:
<a href="/someurl/"><img src="some-image.jpg></a>
Maybe it's just a mistake in posting the question. Could you please create a jsfiddle showing the problem, it is difficult to understand what you mean by "indent".
By the way, you can try to get rid of float:left;
and replace with display:inline-block;
. I avoid unpredictable behavior float
where possible.
Was curious, so I made a simplified fiddle myself: http://jsfiddle.net/bca1m1n2/
What happens is that the border pushes the orange element higher than the rest. When the floated element moves to the next line, it positions itself against the orange element, because the orange element is higher. The behavior seems strange, but correct - so don't use floats for alignment :)
So if you give .edu-cat-item
fixed height this also solves the problem
.edu-cat-item {
width: 175px;
height:100px;
float:left;
}
OP's cool question
source to share
As an alternative to what Kurt Serge wrote, you can use an outline instead of a border. Thus, your "boundary" (outline) does not affect the flow of objects.
Here's a little CSS definition from MDN / W3C (they write the same thing):
Contours don't take up space
MDN adds the following detail:
they are drawn above the content.
So your css will look like:
.edu-sub-select img {
outline-color: #ff9900!important;
outline-style: solid;
outline-width: 2px;
}
source to share