How to adjust the position of specific elements/items/content on a page with CSS


Tags: html,css,website

Problem :

I am new(ish) to HTML and CSS. I am building a site but it feels I am not getting as much control over it as is possible. Control over positioning and placement of items/elements/objects that is.

Example Image

Question: How can I adjust the position of specific elements/items/content on a page with CSS. In this case the 'Horizontal Rule'. How can I move/push the 'Horizontal Rule' up closer to the text above it. The 5 stars and text. And if I wanted to how can I put more space between the title and the image?

For example. In HTML I have a 'Horizontal Rule' separating an image and text above from text below. See this image here.

The 'Horizontal Rule' in this picture is in a div. The 5 star rating system and it's text is in a div. The picture is in a div and the title (everything above the image) is in a div. Lastly, those 4 divs are in a container div. How can I push the 'Horizontal Rule' up closer to the 5 stars and text with out effecting anything else on the page?

For my code please see my link in the comment below. I am unable to post more than 2 links due to reputation. Thanks.

Your answer will be appreciated. Thanks in advance!



Solution :

You could try something such as:

hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }

Not sure if there is any risk is using negative margins... I'm certainly not a CSS expert.


    CSS Howto..

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    How do I align three columns to the center using CSS?

    How can I vertically align two floated divs?

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    How to add new line in a Bootstrap button using CSS

    Jquery Cycle Plugin issue with extending the slideshow “outside” the page boundary

    Ask Toolbar preventing Bootstrap Modal to show

    Image, src, href in same span. How to locate? Webdriver, css locator

    How can i overwrite media queries defined in Bootstrap CSS

    How to float a word next to animated text

    How to use the CSS pseudo element :before in multiple classes of same element

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How can I make the BODY element take up 100% height of the HTML element?

    How to make an empty div or container glow with pure CSS?

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How to use both fixed and stretchy CSS content

    How to align text flush with bottom of container using CSS?

    How to retrieve the real height of a #div (including overflowed parts)

    CSS/HTML menu not showing correctly

    How to center float list elements inside an unordered list

    How To Expand A Textarea To 100% Using CSS Only

    How to position two blocks side by side with CSS

    How to convert a CSS3 2D animatuon to a 3D Transform

    How to dynamically add a CSS class and implement its style in JavaScript

    How to adjust the top of an image and an input in the same line?

    How to add footer to the bottom of the page

    How can I convert this from jQuery to vanilla JS?

    How do I set a different background to current tab?

    How to include a non-standard font-face in azure?

    Any ideas on how I could implement a grid-view in CSS? - CSS