- This topic is empty.
-
AuthorPosts
-
May 10, 2013 at 9:20 pm #44699MBMParticipant
When I add a border to my image class I get padding at the bottom of the image (the images below the slider):
.imgrow1 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 10px;
border:1px solid #333333;
}This is with the border :
![With Border](http://mbmitservices.co.uk/pcommerce/image_padding_border_001.png)
Larger size :
http://mbmitservices.co.uk/pcommerce/image_padding_border_001.png
And without :
![With Border](http://mbmitservices.co.uk/pcommerce/image_padding_border_002.png)
How do I remove the padding but retain the border? I’ve played around with the padding.
May 10, 2013 at 9:39 pm #134741XordanMemberPadding at the bottom of your is normal. Image are displayed inline by default. Just add a “display:block; ” rule in your css.
May 10, 2013 at 9:39 pm #134742wolfcry911ParticipantI’ll take a stab, but in the future it would be beneficial to supply at least some code if not a link to a pen or the page in question.
I’m guessing you’re putting the border on the image’s container. The space below the image is reserved for font descenders because images are inline by default. So you could either set the image to display: block; or vertical-align: bottom. Either should work.
May 10, 2013 at 9:48 pm #134743MBMParticipantdiv.row1 {margin-left:290px;}
div.row2 {margin-left:290px;}.imgrow1 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 10px;
border:1px solid #333333;
display:block;
}.imgrow2 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 25px;
border:1px solid #333333;
display:block;
}Live here :
http://mbmitservices.co.uk/pcommerce/index.html
I added display:block; but it didn’t work.
May 10, 2013 at 9:52 pm #134744wolfcry911Participantthe _image_ is inline by default, you need to target the _image_ and change it to block, or vertical-align: bottom;
.imgrow1 img {
display: block;
}and why two different classes with the same exact styling?
May 10, 2013 at 10:02 pm #134745MBMParticipantThanks. It worked :
.imgrow1 img { display: block;}
.imgrow2 img { display: block;}> and why two different classes with the same exact styling?
imgrow2 has different padding. I couldn’t get it to align correctly with one class.
May 10, 2013 at 10:24 pm #134747wolfcry911Participantits bad practice to have so much repetition for just a single margin. Your html looks to be malformed as well. And you have extraneous div elements. It could be as simple as this:
or
you really don’t need the divs (or the figures, but they’re understandable).
May 11, 2013 at 11:18 am #134778MBMParticipant@wolfcry911 I have divs to align captions and images. I have added Chris’ slide in captions and cannot get the images to align without the divs :
div.row1 {margin-left:260px;position:absolute;}
div.row2 {margin-left:520px;position:absolute;}If there’s a cleaner way let me know!
May 11, 2013 at 1:41 pm #134786wolfcry911ParticipantIt seems strange to have .row2 inside of .row1 – its seems stranger to name them rows seeing that they’re two columns in one row. The absolute positioning is going to wreak havoc if you try to add any more content.
Here’s a pen I created awhile back
http://codepen.io/wolfcry911/pen/CoJqHMay 11, 2013 at 3:05 pm #134789MBMParticipantThanks but the reason for the absolute positioning was because I couldn’t get the images to align with the slider. If I increase the right margin below just one pixel the second image drops to the next line.
figure {
left:40px;
float: left;
position: relative;
overflow: hidden;
margin-right:33px;
}![alignment] (http://mbmitservices.co.uk/pcommerce/alignment.png)
May 12, 2013 at 7:35 am #134833MBMParticipantFixed. One of the images was causing a conflict so I placed it inside the footer.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.