Home >Web Front-end >HTML Tutorial >The difference between CSS width: 100% and width: auto_html/css_WEB-ITnose

The difference between CSS width: 100% and width: auto_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:26917browse

The difference between width: 100% and width: auto

width: auto is smarter. If the margin has taken up 10px of space on the left and right, then the value given by width is 580px.

<style>div{width:600px;overflow:auto;background:#ccc;}p{        width:auto;        margin:10px;        background:red;}</style></head><body><div>    <p>123</p></div></body></html>

If width:100%, it means p The width will be 600px, which will fill the div area, and then it will have margin, so a scroll bar will appear.

div{width:600px;overflow:auto;background:#ccc;}p{        width:100%;        margin:10px;        background:red;}</style></head><body><div>    <p>123</p></div>

are all based on the width of the parent element.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn