Hello,
I have added a border around some text on my website. However, the text is right against the edge of the border. How can I fix this so it looks less cramped? I'm thinking that padding for the bottom, top, and left will work.
Also, how can I fix the border in CSS so that it is just around the text rather than the text AND the empty space on the page in the box with examples?
Thank you!
Link to page: http://myweb.chatham.edu/students/Saman … Words.html
Samantha.Gussow
Guest
62 posts
Eric Rohloff
Senior Advisor
20,271 posts
Hi Samantha,
Use padding. Below will give you 5px padding all the way around. If you need better control set each padding separately.
padding:5px 0 4px 10px;
5px would be top, 0 would be the right, 4px would be the bottom, and 10px would be the left.
Use padding. Below will give you 5px padding all the way around. If you need better control set each padding separately.
padding:5px 0 4px 10px;
5px would be top, 0 would be the right, 4px would be the bottom, and 10px would be the left.
.example {
border: 4px solid purple;
font-size: 16px;
font-style: italic;
padding: 5px;
}
border: 4px solid purple;
font-size: 16px;
font-style: italic;
padding: 5px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Samantha.Gussow
Guest
62 posts
I tried that out, but it's still not working. I would like the border to not extend across all the empty space. How can I fix that? Or is there not an easy fix?
Thank you!
Thank you!
Eric Rohloff
Senior Advisor
20,271 posts
.example {
border: 4px solid #ba55d3;
font-size: 16px;
font-style: italic;
max-width: 350px; //**** this should help
padding-bottom: 10px;
padding-left: 20px;
padding-top: 10px;
}
border: 4px solid #ba55d3;
font-size: 16px;
font-style: italic;
max-width: 350px; //**** this should help
padding-bottom: 10px;
padding-left: 20px;
padding-top: 10px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Samantha.Gussow
Guest
62 posts
Thank you so much! That worked, I did not know about adding max-width to the code, great to know.
Samantha.Gussow
Guest
62 posts
I have another question related to borders: I have set a border around a group of images, but it's showing up overlapping some of the text and the images don't fit inside. Can you please advise how to fix this? It's in the Meals & Food section with 3 images in a row.
link: http://myweb.chatham.edu/students/Saman … Words.html
link: http://myweb.chatham.edu/students/Saman … Words.html
Eric Rohloff
Senior Advisor
20,271 posts
You will have to make several changes to accomplish this and it's going to effect other elements.
Have you tried RLM?
Have you tried RLM?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Samantha.Gussow
Guest
62 posts
No, I haven't tried it yet. I just wanted to create a border for that group of images without completely changing my layout.
Eric Rohloff
Senior Advisor
20,271 posts
That's the problem. You using a lot of absolute positioning.
If you remove this the border will be correct but it will effect your other images.
Add either a class or id's to your other images to get them styled correctly.
If you remove this the border will be correct but it will effect your other images.
img {
margin-bottom: 1.1em;
position: relative;
right: -80px;
top: 10px;
}
margin-bottom: 1.1em;
position: relative;
right: -80px;
top: 10px;
}
Add either a class or id's to your other images to get them styled correctly.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Samantha.Gussow
Guest
62 posts
Okay, I will try that. You always have such helpful advice, thank you so much!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
